Привет, ребятки! Продолжаем тему в стиле CSS3. Я уже писал раньше об opacity и border-image, и теперь предлагаю рассмотреть border-radius.
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;
- Верхний левый и нижний правый (радиус 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;
- Верхние левый и правый (радиус 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;
- Только верхний левый (радиус 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;
В каждом случае я увеличивал радиус только ради того, чтобы Вы могли увидеть, как будет изменяться закругленность углов. То есть, если Вам нужен очень "плавный" угол, радиус нужно ставить побольше.
На данный момент свойство "border-radius" работает в Chrome, Safari и Firefox.
В принципе, все! Никаких сложностей, все очень просто
До скорых встреч, друзья! Чтобы не пропустить очередной пост о новых свойствах в CSS3, подписывайтесь на RSS.
З.Ы. Узнайте новые способы раскрутки блога.
ФИ: Михайленко Олег.
Да, CSS3 рулит, и это неоспоримо. Вот только увидят элементы дизайна, сделанные по этой технологии только 20% посетителей…
Кстати, я все-таки написал ту статью для акции по вытеснению “нехороших” браузеров
http://webholt.ru/46-akciya_sdelaem_internet_luchshe.html – присоединяйся
Почему нет упоминаний о различных недостатках в понимании border-radius различными браузерами?
Например, о том, что Safari все таки НЕ ПОНИМАЕТ правило -webkit-border-radius, если указано больше одного числа в качестве радиусов скругления для разных уголков блока, а понимает лишь одно единственное число в значении; – а для одного конкретного уголка необходимо использовать -webkit-border-top-left-radius (для левого верхнего в данном случае).
Ну, если не упомянул, значит я не знал об этом
Спасибо, что подметили
Да, ну и о примерах Ваших я умолчу… Вы их хотя бы проверяли прежде чем публиковать…
ну вот, Вы так заебца все понимаете и разбираетесь, так чего кипишь подняли
?
Терь возьмете за основу эту статью, исправите ошибки что считаете за нужное и у ся запостите и все бу в ажуре.
Если б я их не проверял или они не работали, я б не публиковал.
ИЕ 8, симпатичные круглые рамки превращаются в квадратный ужас(
Блин, а я так обрадовался, что такой хороший урок нашел)
В смысле урок то хороший, только ИЕ со своими передовыми технологиями будущего оставляет нас в заднице)
Попробуйте вот этот хак для ИЕ: http://css3pie.com/
У меня на одном проекте все срабатывает
[...] я подсмотрел на блоге дизайнера Олега Михайленко – border-radius в CSS3. Помимо этого способа в оригинальной статье автор [...]
Для лисички есть неплохой плагинчик. Недавно сам его для себя открыл и ненарадаюсь)
https://addons.mozilla.org/ru/firefox/addon/csssir
Можно сделать и и для ie используя костыли. Вот генератор http://step-web.ru/online-service/css-border-radius.php для закругления углов, для ленивых с поддержкой старых версий ie.