Привет, ребятки! Продолжаем тему в стиле CSS3. Я уже писал раньше об opacity и border-image, и теперь предлагаю рассмотреть border-radius.

border-radius – очень удобное свойство в CSS3, которое намного облегчит жизнь верстальщику и он позабудет навсегда, как резать каждый закругленный угол в красивой кнопочке или формочке.

Итак, хватит текста, сразу к делу!

Код этого свойства очень простой, к примеру:

1
2
3
4
5
6
7

.mycontent {
border:1px solid #999999;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
}

Присваиваем этот класс к какому-нибудь контейнеру, к примеру, с текстом.

Выше, в кусочке кода, я описал толщину, тип и цвет самой границы, далее стандартное свойство для закругления углов в CSS3, ну и, известные нам по предыдущим постам, хаки для современных браузеров. В итоге мы получим текст в красивой рамочке с закругленными углами.

Приглашаю Вас посмотреть DEMO-страницу! На ней я описал 4 разных варианта отображения закругленных углов.

Вот листинг каждой из них:

• Закругленные все углы (радиус указан 10 пикселей)

1
2
3
4
5

border:1px solid #999999;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

• Верхний левый и нижний правый (радиус 15 пикселей)

1
2
3
4
5

border:1px solid #999999;
border-radius:15px 0 15px 0;
-moz-border-radius:15px 0 15px 0;
-webkit-border-radius:15px 0 15px 0;
-khtml-border-radius:15px 0 15px 0;

• Верхние левый и правый (радиус 20 пикселей)

1
2
3
4
5

border:1px solid #999999;
border-radius:20px 20px 0 0;
-moz-border-radius:20px 20px 0 0;
-webkit-border-radius:20px 20px 0 0;
-khtml-border-radius:20px 20px 0 0;

• Только верхний левый  (радиус 25 пикселей)

1
2
3
4
5

border:1px solid #999999;
border-radius:25px 0 0 0;
-moz-border-radius:25px 0 0 0;
-webkit-border-radius:25px 0 0 0;
-khtml-border-radius:25px 0 0 0;

В каждом случае я увеличивал радиус только ради того, чтобы Вы могли увидеть, как будет изменяться закругленность углов. То есть, если Вам нужен очень “плавный” угол, радиус нужно ставить побольше.

На данный момент свойство “border-radius” работает в Chrome, Safari и Firefox.

В принципе, все! Никаких сложностей, все очень просто

До скорых встреч, друзья! Чтобы не пропустить очередной пост о новых свойствах в CSS3, подписывайтесь на RSS.

З.Ы. Узнайте новые способы раскрутки блога.