Закругленные углы с помощью CSS

Большинство программистов при фразе «закругленные углы» начинает бить нервная дрожь. Это конечно, дизайнерское решение. Иногда бывает вполне прилично смотрится, но рисуя закругленные углы, многие дизайнеры раньше не задумывались насколько увеличивается html код страницы.

Сейчас программисты могут расслабится и не нервничать, когда требуется сделать закругленные углы у блоков. Сегодня приведу пример решения данной проблемы всего одним div-ом с использованием новых возможностей CSS3.

Если вспомнить что из себя представляли старые способы:

  1. Использование таблиц.В худшем случае блок мог раздвигаться не только вертикально, но и горизонтально, тогда мы получали таблицу с 9 ячейками, для каждой из которых задавался фон: отрезанная часть соответствующей области рамки. И было просто прекрасно, если внутренний фон не был градиентным или снаружи рамки не было теней при неоднородном фоне страницы.
  2. Использование кучи div блоков. Тоже самое, при горизонтальном и вертикальном масштабировании блока нужно было использовать, как минимум 8 div-ов вложенных друг в друга.
  3. Так же были и более экзотичные способы. 🙂

Скругление углов средствами CSS3

Наконец у нас появилась возможность значительно упростить данный процесс. Большинство обозревателей теперь, хоть и с оговорками, поддерживают закругление углов.

Имеем html код на странице:

<div class="block">Наш текст</div>

Код CSS, который и закругляет наши углы:

div.block {
   display: block;
   margin: 5px;
   padding: 0px;
   border: 1px solid #989898;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background-color: #FFF;
}

Из приведенного выше кода за закругление отвечают только строчки:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

На самом деле, привел пример самый простой, где все углы одинакового радиуса. Хоть и можно в браузерах FireFox и Webkit (Safari, Chrome) настраивать разные радиусы по конкретным углам или даже переменный радиус одного угла, как всегда Opera и IE — впереди планеты всей, точнее сзади. В этих браузерах эти функции не работают. Посему, думаю стоит возвращаться к этому вопросу, когда везде эта функция будет работать в полной мере.

Несмотря на небольшой косяк с совместимостью, данное нововведение серьезно всем облегчило жизнь!