Сегодня речь пойдет о создании круглых уголков. Теперь верстальщикам не придется прибегать к графической нарезке уголков и перегружать web-страницы скриптами, чтобы создать блоки с закругленными углами. Ура! CSS 3 поддерживает скругление углов и все больше и больше браузеров приветствуют эти новшества. Долой старые стереотипы. Начинаем пользоваться новыми технологиями!
Вот таблица со свойствами css для создания скругления уголков с поддержкой различных браузеров.
| CSS3 (Opera) | Mozilla | Safari |
|---|---|---|
| border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
| border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
| border-radius | -moz-border-radius | -webkit-border-radius |
Пример:
Радиус скругления можно варьировать, также существует возможность скругления определенного угла элемента.
Смотрите пример:
Вот стили, которые могут понадобиться для более четкого понимания примера:
border-top-left-radius:20px;
border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-webkit-border-top-left-radius:20px;
background:#eee;
border:2px solid #60A007;
padding:20px;
width:450px;
November 6th, 2011 в 12:14 am
Спасибо очень помогла ваша статья, как раз делаю скругленные углы на сайте. Жаль только что IE гад не поддерживает css3. Вообще считаю IE преступлением против человечества.