Закруглённые углы CSS
При вёрстке часто нужно получить у элементов в HTML
скругление углов через CSS.
CSS свойство
border-radius позволяет получать
скруглённые углы (англ. rounded corners). Это конечно не абсолютно кроссбраузерный способ, т.к. он появился только в CSS 3, но его уже поддерживают все современные версии браузеров: Mozilla Firefox 4.0+, IE 9+, Chrome 9+, Opera 10.5+, Safari 5+.
Ранние версии браузеров Firefox тоже умеют скруглять углы, используя нестандартное свойство -moz-border-radius. Браузеры Safari (Apple) и Chrome понимает нестандартное свойство -webkit-border-radius.
На сайте
border-radius.ru мы как раз и объединили все нестандартные правила в единый инструмент, позволяющий не держать в голове все нюансы, а просто испльзовать его, чтобы вёрстка была кроссбраузерной и скругление уголков работало стабильно.
Задавать значение можно в любых единицах измерения, допустимых в CSS (px, pt, em), в том числе и в процентах (тогда значение вычисляется отсносительно ширины блока). Значение по умолчанию 0, не наследуется.
Применяется ко всем элементам (исключение составляют таблицы с border-collapse:collapse).
Даже если у скругляемого объекта не задана рамка, то скругление сработает с фоном.
Чтобы задать скругления на всех четырёх углах задаётся значение
border-radius. Помимо этого можно задать скругления только для нужных углов: border-top-right-radius (верхний правый), border-bottom-right-radius (нижний правый), border-bottom-left-radius (нижний левый), border-top-left-radius (верхний левый).
Допускается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также можно задавать два значения через слэш (/).
В случае задания двух параметров через слэш, первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рисунке показана разница между обычным скругленным уголком и эллиптическим уголком.