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

Как реализовать скругленные углы с помощью 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

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.