border-radius

Пример

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

#example1 {
border: 2px solid red;
border-radius: 25px;
}

#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}

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

Определение border-radius

CSS свойство border-radius определяет радиус углов элемента.

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

Это свойство может иметь от одного до четырех значений. Вот правила:

Четыре значения - border-radius: 15px 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу):

Три значения - border-radius: 15px 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углам, а третье значение применяется к нижнему правому углу):

Два значения - border-radius: 15px 50px; (первое значение применяется к верхнему левому и нижнему правому углам, а второе значение применяется к верхнему правому и нижнему левому углам):

Одно значение - border-radius: 15px; (значение применяется ко всем четырем углам, которые закруглены одинаково):

Показ демо ❯

Значение по умолчанию:	0
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS3
JavaScript синтаксис:	object.style.borderRadius="25px" Попробуй

Поддержка border-radius

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

Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.

Свойство
border-radius	5.0 4.0-webkit-	9.0	4.0 3.0-moz-	5.0 3.1-webkit-	10.5

Синтаксис border-radius

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

Примечание: Четыре значения для каждого радиуса приведены в порядке верхний левый, верхний правый, нижний правый, нижний левый. Если нижний левый опущен, это то же самое, что верхний правый. Если нижний правый опущен, это то же самое, что верхний левый. Если верхний правый угол опущен, то это то же самое, что верхний левый.

Значения border-radius

Значение	Описание	Демонстрация
length	Определяет форму углов. Значение по умолчанию - 0. Читайте о единицы измерения длины	Демо ❯
%	Определяет форму углов в %	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры border-radius

Пример

Установите закругленные углы для элемента с цветом фона:

#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

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

Пример

Установите закругленные углы для элемента с границей:

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

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

Пример

Установите закругленные углы для элемента с фоновым изображением:

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

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

Пример

Также обратите внимание на это:

#example1 {
border-radius: 2em / 5em;
}
/* эквивалентно:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */

#example2 {
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; */

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