Как реализовать скругленные углы с помощью CSS

В прошлых уроках мы рассматривали как повернуть текст и как добавить тень с помощью CSS.

Тема сегодняшнего урока: как скруглить углы с помощью CSS.

Для этого существует свойство border-radius. Поэтому если мы хотим всем углам в блоке придать одинаковый радиус скругления, пишем:


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


Для правого верхнего угла код будет выглядеть следующим образом:


border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;


Для правого нижнего:


border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;


Для левого нижнего:


border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;


Для левого верхнего:


border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;


В принципе, после этого можно смело идти отдыхать и смотреть Папины дочки онлайн. Для тех же, кто борется за кроссбраузерность, включая IE6, придется еще пару минут поработать. Как и всегда, “ишак” данное свойство не поддерживает, поэтому предлагается использовать CSS3 Pie. Переходим на сайт css3pie.com, скачиваем PIE.htc последней версии, заливаем на сервер и в CSS-файле дописываем код:


behavior: url(PIE.htc);
position: relative;


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

Вторая строка - это на тот случай, если в IE6 все-таки возникнут проблемы с бордером.

Единственный неприятный момент - данный способ (подключение PIE.htc) не сработает для IE6, если вы собираетесь скруглить только некоторые углы. Позитивная же сторона в том, что данный хак можно использовать еще и для добавления теней, который мы разбирали в позапрошлом уроке.

Вообщем, смотрим пример и радуемся.

DEMO

Спасибо за добавление статьи в: