Закруглённые углы 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 (верхний левый).

Допускается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также можно задавать два значения через слэш (/).

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