Свойство border-radius CSS

Определение и использование

Атрибут border-radius - это сокращенный атрибут, который используется для установки четырех атрибутов border-*-radius.

Совет:Этот атрибут позволяет вам добавить закругленные края к элементам!

См. также:

Урок CSS3:Рамки CSS3

Пример

Добавьте закругленные края к элементу div:

div
{
border:2px solid;
border-radius:25px;
}

Попробуйте сами

Больше примеров внизу страницы.

Синтаксис CSS

border-radius: 1-4 length|% / 1-4 length|%;

Комментарий:Установите по этому порядку четыре значения для каждого радиуса. Если пропустить bottom-left, то оно будет равно top-right. Если пропустить bottom-right, то оно будет равно top-left. Если пропустить top-right, то оно будет равно top-left.

Значение атрибута

Значение Описание Тест
length Определение формы закруглений. Тест
% Определение формы закруглений с помощью процента. Тест

Пример 1

border-radius:2em;

Эквивалент:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Пример 2

border-radius: 2em 1em 4em / 0.5em 3em;

Эквивалент:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Технические детали

Значение по умолчанию: 0
Инheritability: нет
Версия: CSS3
JavaScript синтаксис: object.style.borderRadius="5px"

Поддержка браузерами

В таблице указаны версии первых браузеров, которые полностью поддерживают этот атрибут.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5