Создаем закруглённые уголки с помощью CSS 3

[webmasters_by]

где было?
это не про IE забыли, это IE забыл про border-radius

[webmasters_by]

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

[sayber]

А вам больше нравиться геморой из различных нынешних способов по закруглению??? Кроме разве что последней статьи с кружками.

[EKCTPEMICT]

Увы, приходится гемороится ради тех 15% рынка, которых занимает IE 6.0. Заказчик, то бишь клиент прав, пока кризис и раскидываться клиентами нет возможности.

[ibeatle]

а можно линк на статью с кружками?

[sayber]

Читайте на здоровье habrahabr.ru/blogs/css/63836/

[Agent_Smith]

Хм, вы о этой статье, я сначала подумал про другую, вот эту:
habrahabr.ru/blogs/css/64016/#habracut

[sofcase]

А зачем переучивать? Нужно просто выучить новшество! Когда все браузеры перейдут на CSS3, все равно придется учить CSS3, и тогда сами заметите что верстка станет немного легче. Если вы считаете себя грамотным верстальщиком — вам придется выучить CSS3.

[EKCTPEMICT]

Я выучил HTML5 вот толку то…

Сейчас даже W3C должно слушать как дует ветер от мелкомягких. Знаем недавние комменты по поводу отказа от ряда тегов, что объявлялись в новой редакции хтмла…

[GMile]

Ну вы и кадр

[простите, неудержался]

[bogus92]

Ну тогда ждите, пока заказчики начнут выбирать для исполнения проектов тех, кто захотел переучится на CSS3.

[Lector]

какая разница? вы из тех веб-мастеров, которые оптимизируют сайт под один свой любимый браузер, забывая про остальные?
я сегодня 4 часа провозился из-за того, что одна из надписей в дизайне блога налезала на другую. причем только в Google Chrome, а в IE6-8, FF2-3.5, Opera все нормально.
после этих танцев с бубнами читать про то, как круто на css3 будет делать закругленные кнопочки смешно. ближайшие годы ни один веб-мастер в своем уме не будет использовать фишки, работающие лишь на малой части браузеров.

[Stmf]

Ну и зря.

[OmeZ]

Далеко не обязательно. Можно продублировать функционал с рассчетом на css3. Причем с точки зрения клиента, если на странице over 9000 таких блоков использование css3 займет в разы меньше времени на рендер страницы чем такое же количество триков в самом коде. Минусом будет только то что придется добавить парочку условных css файлов либо использовать избирательные хаки

[patt]

мы уже используем, в IE смотрится чуть хуже, но не критично. А в последних проектах я выкидывал для ie6 надпись, типа браузер устаревший установите новый, и с сылки на opera, fx, chrome. Пока жалоб ни от заказчиков ни от клиентов не поступало. Если юзер просто закрывает окошко то видит сайт с непрозрачными png'шками и кое где поползшим дизайном. Недавно видел более радикальный вариант: для ie на белой странице посередине: «Ваш браузер гавно» :)

[tapazukk]

Более того, уже используют.

[Ashot]

в данном случае я бы сказал: IE забыл про border-radius :)
тут уж особо не ппишель для осла есть 2 варианта:
1. продолжать использовать изображения
2. забивать на него, но делать с оглядкой на будующе и включать в ксс свойство border-radius в надежде на то, что когда-нибудь он будет его поддерживать

[proff6]

а как же Opera?

[webmasters_by]

вы бы хоть поняли о чем статья…

[Tayler]

Вам надо в нике вторую букву на русскую «у » поменять

[Ashot]

опера, на сколько мне известно, пока не поддерживает это свойство, к сожалению. но не думаю, что это на долго

[webmasters_by]

там в начале написано по поводу Оперы

[Ashot]

извиняюсь, не заметил

[Ferroman]

You are an idiot © House

[phantasm]

webkit уже поддерживает «обычный» border-radius, без приставки -webkit. я гарантирую это (с)

[VasilioRuzanni]

Вот уж точно. Выглядят жутковато.

[dmiceman]

Во всех webkit-based жуткое закругление. Как увидел свой сайт в arora — так и сел.

[dmiceman]

Виноват, сафари не видел. Впредь, буду аккуратнее с обобщениями :-)

[VasilioRuzanni]

Ну в плане скруглений/закруглений/сглаживаний/приятности-содержимого-глазу Сафари вообще заруливает все и вся :) Еле-еле перешел с него на Chrome в свое время из за этого.

[crwin]

у хрома вообще со сглаживанием некоторые проблемы, что странно ввиду что у safari всё нормально

[remal]

-khtml-border-radius для Konqueror

[ap3rus]

Не понимаю, почему бы всем браузерам уже не ввести border-radius без всяких суффиксов -ххх…

[MCBumf]

потому что все браузеры придерживаются стандартов, а border-radius — это стандарт, который еще не принят ) приходится делать «по-своему»

[kostos]

Это еще не стандарт, и если заметили в статье указан различный синтаксис. Вот как утвердят стандарт, так и станет один синтаксис, без префиксов. Я например использую border-radius в простейших вариантах(когда скруглены все углы) примерно так:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

[vithar]

В Opera 10 не будет border-radius.

Скруглить углы у таблицы можно только с помощью ещё одной обёртки, overflow: hidden и только в webkit. Отличный сферический конь в вакууме.

[Vedmak]

Да, но скоро будет:

border-radius will be supported from Presto 2.3 onward (ie after Opera 10, which is Presto 2.2 based).

dev.opera.com/forums/topic/258986?t=1249405103&page=1#comment2936734

[vithar]

Скоро? Вы себе представляете цикл разработки новой версии браузера? Сколько времени прошло между выпуском 9.5 и выпуском 10.0? Посмотрите по релизам предыдущих версий. Это минимум год.

Оперцы «переизобретают веб» делая Unite.

[ap3rus]

Они и с mobile версией любят затягивать, для S60 так и не появилась 9.х, хотя обещания начались еще (!) полтора года назад. Извините за оффтоп :)

[pepelsbey]

Цикл разработки новой версии браузера не зависит от включения в ядро поддержки border-radius. В финальной 10-й версии и правда, скорее всего, не будет новой версии Presto, но затягивать выпуск того, что очень востребованно у разработчиков тоже никто не собирается.

[vithar]

Ядро же самопо себе не используется. Используется браузер с ним.

Если новая версия Престо будет в 10.x это тоже не сильно залечит. Будут пользователи (и их будет много), кто будет видеть на 10.0 и не обновляться.

[arkandos]

Не сказал бы, что это большая радость, к сожалению.

[vithar]

Я и не говорю, что радость. Горечь, скорее.

[arkandos]

Естественно. Но посмотрим, когда же CSS3 станет стандартом.

[vithar]

HTML4 стал стандартом в 1999 году. Его до сих пор ни один браузер не поддерживает в полном объёме.

[ferrari]

удивляюсь с этих постов, ну да, css 3, здорово, но какие в задницу скругленные уголки через border-radius если браузер от клёвых пацанов не понимает даже примитивный селектор TAG > TAG?
Станет задача, реализовать в макете блоки со скругленными уголками — один фиг будете вырезать из картинок и подставлять фоном. Или же проявите инициативу и напишите так, но после первого вопроса заказчика «почему не везде работает», увы, придется делать по старинке.

PS: предлагаю забить на кроссбраузерность и пользоваться всем из CSS3, множественный бекграунды, тени — все очень здорово, но ближайшие 3-4- года мы обречены все делать «по старинке»

[fiskus]

Иногда скругленные уголки — не необходимость, а плюс в современных браузерах. Пользователи ИЕ и Оперы видят обычные прямоугольники, пользователи Фаерфокса, Сафари и Хрома — прямоугольники со слегка скругленными уголками. Все счастливы.
Пример — меню на smashingmagazine.com

[ChemAli]

Достаточно было привести соответствующие css-коды для каждого из браузеров и ссылки на решения для IE :)

[sofcase]

Статья не про то как сделать закругленные углы на CSS2 с решениями под каждый браузер, а про свойство border-radius в CSS3, статей по решениям закругленных углов море!

[aleman]

не понял… если под каждый браузер свой способ… это что получается? опять исчезает поддержка одного стандарта. Почему бы всем не остановится просто на border-radius без приставок.

[lashtal]

До тех пор, пока это свойство не будет реализовано полностью в соответствии со стандартом / находится в процессе тестирования — оно будет с приставкой.
Другое дело, что этот обзор сейчас не имеет смысла, поскольку по сути рассматривается не сам бордер-радиус, а его специфические реализации. Делать цсс под каждый браузер (иногда со своим синтаксисом) — неоправданно.
К сожалению, пока приходится зачастую отказываться от css-only решений, и прибегать к js.

[aleman]

А, ну теперь ясно. Спасибо.

[andi]

спасибо.
как-то самому недосуг всё статейку наклепать, а тут уже готово всё.

[my_own_parasite]

www.w3.org/TR/CSS21/syndata.html#vendor-keywords

[undefine]

До тех пор пока border-radius поддерживают не все браузеры, отличным решением является rocon от Сергея Чикуёнка.

[arkandos]

Далеко не единственное, но вполне удобное решение на JS.

[Fragster]

удобно, конечно. но пока рано: imagebin.ca/view/Yah7Uu26.html

[DibrovLALALA]

когда всё будет поддерживать CSS3 круглые рамки выйдут из моды наконец то! )

[pratavetra]

Спасибо, мне понравилась статья. Просто, наглядно и доступно. Для меня CSS3 по прежнему остаётся неким далёким и мифическим зверем, выше правильно писали — очень сложно отказаться от отладки для IE6, потому что работать должно и в нём, но помечтать о тех временах, когда не нужны будут стилистические изъёбы, вида картинок подложки, или тех же JS Rounded Corners, хорошо.

Слегка повеселило, правда, фраза про то, что это одно из самых ожидаемых свойств в CSS3. Не уверена, что это так, во всяком случае я от CSS3 ожидала, помимо этого, кучи других вещей. И мультипл фон для меня важнее на порядок. )

Но всё равно спасибо, я оценила как текст, так и уровень иллюстративности.

[sasha_tinkoff]

А вот интересно как прозрачность углов будет работать на неоднородном фоне, например, на фоне цветного рисунка.
К сожалению, это стало небольшой проблемой однажды. Использовать jquery-плагин для закругленных углов, и несколько расстроился, когда увидел, что это нормально работает только на однородном фоне. В противном случае — нет. Пришлось вырезать картинками (хотя все равно пришлось бы вырезать, потому что потом увидел что помимо закругленных углов еще и тени есть).
Говоря про тот же плагин от jquery. Всем хорош, к примеру, но нет поддержки закругленного border'а :( Зато несомненно главный плюс — работа во всех нужных браузерах =)

[P1RATE]

Про горизонтальный и вертикальный радиус не знал, спасибо)

[okopok]

it works!!!
Wheeeeee!!! ^____^

[Theo_from_Sed]

поправь «обявляется „

[webmasters_by]

поправил, спасибо

[Theo_from_Sed]

Недавно встречал какой-то htc, реализующий закруглённые уголки для IE. В принципе можно использовать border-radius, и костыль для ИЕ. Ну или как вариант — забить на ИЕ, контент всё равно нормально будет отображаться, пусть и без закруглений уголков.

[xolvo]

вот эти ваши "-moz-border-radius" и т.д. валидацию не проходят ((

Кто что думает по этому поводу?

[dfuse]

Конечно, это ведь еще не принятый стандарт. Что делать — да ничего :) не проходят и ладно. 100% валидность не должна быть самоцелью, главное чтобы сайт работал и отображался как надо, а пара ошибок валидации такого плана — это незначительная мелочь.

[piumosso]

Как вы думаете, какой должен быть объективный порог браузеров, недостаточно поддерживающих CSS3, чтобы его начали применять?

[lahmatiy]

Поправочка: из статьи по свойству -moz-border-radius на developer.mozilla.org следует, что данное свойство поддерживается начиная с Firefox 1.0 (а не с третьей версии как указано в статье). Сам же стал использовать это свойство (там где это не критично) еще с приходом Firefox 2.0 (и честно думал до сих пор, что именно в нем оно появилось). Значительное изменение можно заметить в Firefox 3.0, когда закругленные углы стали со сглаживанием (добавили antialiasing). Сглаживание так же есть в Safari, но отсутствует в Chrome.

[lahmatiy]

И забыл добавить, что эллипстические углы в Firefox появились только с версии 3.5. При этом можно заметить, что в webkit (Safari/Chrome) и в gecko (Firefox) используется разный синтаксис для эллипстических углов. В данном случае gecko поступает правильней, так как соответсвует текущему состоянию черновика css3 относительно border-radius.

[AlexS]

Есть ли вариант для IE7?

[webmasters_by]

с помощью только CSS сделать не получится

[hexes]

Тест:
родительский блок с скругленными углами (до круга) и оверфлоу: хидден, дочерний блок бОльшего размера вылезает за круглые границы. Проверено в:

Opera
Версия: 10.61
Сборка: 6430
Платформа: Linux
Система: x86_64, 2.6.32-24-generic

FireFox 3.6.8

Работает корректно в:
Chromium 6.0.487.0 (55176) Ubuntu 10.04