Прогулявшись по зарубежью, в который раз мысленно выдал аплодисменты людям думающим. Казалось бы, ну все сказано про закругление уголков без применения графики, примерам не счесть числа, ан нет. Есть и другие альтернативы пустым блокам. Много расписывать не буду, тут еще есть над, чем поработать.

Смысл, встретившийся техники таков:

html

 <div class="radius">
    <div class="rad">
      <div class="rd">
        Text
      </div>
    </div>
  </div>

Как видно по сравнению с обычным приемом, два блока решают проблему не только самого закругления, но и рисуют border вокруг контейнера.

css

.radius {
  background:url(XX.xxx) repeat-y #eee;
  border:#aaa solid;
  border-width:0 1px;
  margin:10px auto;
  width:200px;
}
.rad {
  border:#aaa solid;
  border-width:1px 0 0;
  position:relative;
  top:-1px;
}
.rd {
  border:#aaa solid;
  border-width:0 0 1px;
  position:relative;
  top:2px;
}

Из стилей становится понятно, как это дело реализовано. Парочка не очень приятных деталей.

Толщина border-а не может быть больше 1px. Или!? Первый пробный подход оказался не удачным :)

И собственно радиус закругления.

За то без проблем делается градиент на всю высоту блока. Если сделать фон блока в цвет border-а или наоборот, будет просто блок с закругленными уголками.

Вот такие дела.

P.S. Линк на первоисточник.