border-radius в CSS3

15
Фев
2010

border-radius - закругленные углы в css3 html

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

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

Demo border-radius CSS3

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

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

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

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

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

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

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

  • Закругленные все углы (радиус указан 10 пикселей)
border:1px solid #999999;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

border-radius in CSS3 @ www.mykhailenko.com

  • Верхний левый и нижний правый (радиус 15 пикселей)
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;

rounded corners in CSS3 @ www.mykhailenko.com

  • Верхние левый и правый (радиус 20 пикселей)
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;

Закругленные углы в CSS3 @ www.mykhailenko.com

  • Только верхний левый  (радиус 25 пикселей)
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;

Закругленные углы в CSS3 - HTML

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

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

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

Download (скачать) border-radius CSS3

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

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

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (12) к “border-radius в CSS3”

  1. gwer пишет:

    Да, CSS3 рулит, и это неоспоримо. Вот только увидят элементы дизайна, сделанные по этой технологии только 20% посетителей… :(
    Кстати, я все-таки написал ту статью для акции по вытеснению “нехороших” браузеров ;)
    http://webholt.ru/46-akciya_sdelaem_internet_luchshe.html – присоединяйся =)

  2. v3 пишет:

    Почему нет упоминаний о различных недостатках в понимании border-radius различными браузерами?

    Например, о том, что Safari все таки НЕ ПОНИМАЕТ правило -webkit-border-radius, если указано больше одного числа в качестве радиусов скругления для разных уголков блока, а понимает лишь одно единственное число в значении; – а для одного конкретного уголка необходимо использовать -webkit-border-top-left-radius (для левого верхнего в данном случае).

  3. v3 пишет:

    Да, ну и о примерах Ваших я умолчу… Вы их хотя бы проверяли прежде чем публиковать…

    • galaxy пишет:

      ну вот, Вы так заебца все понимаете и разбираетесь, так чего кипишь подняли ;) ?
      Терь возьмете за основу эту статью, исправите ошибки что считаете за нужное и у ся запостите и все бу в ажуре.

    • Oleg Mykhailenko пишет:

      Если б я их не проверял или они не работали, я б не публиковал.

  4. WebGrow пишет:

    ИЕ 8, симпатичные круглые рамки превращаются в квадратный ужас(
    Блин, а я так обрадовался, что такой хороший урок нашел)

  5. [...] я подсмотрел на блоге дизайнера Олега Михайленко – border-radius в CSS3. Помимо этого способа в оригинальной статье автор [...]

  6. Wazowski пишет:

    Для лисички есть неплохой плагинчик. Недавно сам его для себя открыл и ненарадаюсь)
    https://addons.mozilla.org/ru/firefox/addon/csssir

  7. Александр пишет:

    Можно сделать и и для ie используя костыли. Вот генератор http://step-web.ru/online-service/css-border-radius.php для закругления углов, для ленивых с поддержкой старых версий ie.