Закругленные углы картинками

В этой статье я хочу ознакомить вас с самым простым методом округления углов блочных элементов при верстке html + css. Этот метод используется в простейшем случае: когда цвет фона в блоке и вне блока однородный (то есть без градиентов или фоновых изображений).

Для тех, кто, возможно, не понял, поясню. В дизайне веб-страницы мы видим что-то подобное:

Как это верстать? Очень просто. Делаем 4 изображения углов (такими, какими они и должны выглядеть: радиус округления, цвет фона, цвет картинки). Примерно вот так:

Рисуем закругленные углы:

Объясню, на всякий случай, как это сделать в фотошопе. Значит так, выбираем в панели инструментов Rounded Rectangle Tool:

Rounded Rectangle Tool

Ставим в панели опций флажок на Paths и необходимый радиус округления:

Paths

Радиус округления

Рисуем прямоугольник с закругленными углами:

Rounded Rentangle

И выставляем флажок на «Load path as a selection»:

Load path as a selection

Теперь выделенную область зальем нужным нам цветом:

Выделяем

Заливаем

Ну, а из получившегося вырезаем необходимый уголок

Вырезаем угол

Пововачиваем три раза по 90 градусов и сохраняем:

Верстаем закругленные углы

А верстать это еще проще, чем рисовать:) Код выглядит следующим образом:

<div class="container">
 <div class="tr">
  <div class="tl">
   <div class="bl">
    <div class="br">
     <p class="text">TEXT</p>
    </div>
   </div>
  </div>
 </div>
</div>

.container{color:#FFFFFF;background-color:#FF9900;}
.tr{ background:url(tr.png) no-repeat top right;}
.tl{ background:url(tl.png) no-repeat top left;}
.bl{ background:url(bl.png) no-repeat bottom left;}
.br{ background:url(br.png) no-repeat bottom right;}
.text{text-align:left; padding:5px 10px 5px 10px;}

В итоге получаем следующее:

Как видим, html-код получился, мягко говоря, не слишком семантичен. Для того, чтобы устранить эту неприятность можно воспользоваться, так называемыми, псевдоэлементами before и after, что максимально уменьшит код html и сделает его семантичным:

<div class="rounded">TEXT</div>

.rounded{background: #FF9900;}
.rounded:before{
content:url(tl.png);
background: url(tr.png) no-repeat 100%;
display: block;
}
.rounded:after{
content:url(bl.png);
background: url(br.png) no-repeat 100%;
display: block;
}

Для более сложных случаев (градиентов, фоновых изображений) рекомендую использовать другие методы закругления углов, что будут описаны мною в следующих статьях.