CSS-спрайтово скругленные углы

Сделал блок текста со скругленными углами с использованием элементов техники CSS-sprites. Пример работает для блоков фиксированного размера. Но предполагаю впоследствии сделать и для произвольной величины.

Как выглядит

Из чего состоит

1. Файл изображения



2. Стили CSS



.rounded {
  width: 300px;
  margin: 16px;
  background-color: #DFE5ED;
  color: #000;
}
.rounded p {
  padding:5px 10px;
}
.rc {
  background-image: url('public/rounded.gif');
  background-repeat:no-repeat;
  height: 150px;
}
.tl {
  background-position: -15px -15px;
}
.bl {
  background-position: -15px 135px;
}
.tr {
  background-position: 285px -15px;
}
.br {
  background-position: 285px 135px;
}



3. Код HTML



<div class="rounded">
  <div class="rc tl">
    <div class="rc tr">
      <div class="rc bl">
        <div class="rc br">
          <p>Блок фиксированной ширины</p>
          <p>CSS-блок со скругленными краями c использованием CSS-спрайтов.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Работает в Firefox, IE 6, Chrome, Opera, Safari.

Что дальше?

Я предполагаю CSS скругленные углы для блоков произвольного размера.