Сокращенное свойство для радиусов границ: border-radius

border-radius

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 4.0 4.0 9.0 10.5 5.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 1.0 7 12.0 5.1.1
Свойство
border-radius — это общее свойство для задания радиусов границ
Описание
Для того чтобы не задавать каждый радиус границы по отдельности существует возможность задать сразу все радиусы для границ.


запись border-radius: 15px; равноценна записи border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;


запись border-radius: 15px 2em; равноценна записи border-top-left-radius: 15px; border-bottom-right-radius: 15px; border-top-right-radius: 2em; border-bottom-left-radius: 2em;


запись border-radius: 15px 2em 60%; равноценна записи border-top-left-radius: 15px; border-top-right-radius: 2em; border-bottom-left-radius: 2em; border-bottom-right-radius: 60%;


запись border-radius : 15px 2em 60% 15%; равноценна записи border-top-left-radius: 15px; border-top-right-radius: 2em; border-bottom-right-radius: 60%; border-bottom-left-radius: 15%;



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

запись border-radius: 15px / 50px; равноценна записи border-top-left-radius: 15px 50px; border-top-right-radius: 15px 50px; border-bottom-right-radius: 15px 50px; border-bottom-left-radius: 15px 50px;


запись border-radius: 15px 2em / 50px 3.5em; равноценна записи border-top-left-radius: 15px 50px; border-bottom-right-radius: 15px 50px; border-top-right-radius: 2em 3.5em; border-bottom-left-radius: 2em 3.5em;


запись border-radius: 15px 2em 60% / 50px 3.5em 27%; равноценна записи border-top-left-radius: 15px 50px; border-top-right-radius: 2em 3.5em; border-bottom-left-radius: 2em 3.5em; border-bottom-right-radius: 60% 27%;


запись border-radius : 15px 2em 60% 15%; / 50px 3.5em 27% 49%; равноценна записи border-top-left-radius: 15px 50px; border-top-right-radius: 2em 3.5em; border-bottom-right-radius: 60% 27%; border-bottom-left-radius: 15% 49%;
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам за исключением когда для элементов table и inline-table применено свойство border-collapse со значением collapse
Может принимать значения
border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius
Значение по умолчанию
0 — для свойства border-top-left-radius
0 — для свойства border-top-right-radius
0 — для свойства border-bottom-right-radius
0 — для свойства border-bottom-left-radius
Правила записи

свойство: значение; или

свойство: значение значение; или

свойство: значение значение значение; или

свойство: значение значение значение значение;



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

свойство: значение / значение; или

свойство: значение значение / значение значение; или

свойство: значение значение значение / значение значение значение; или

свойство: значение значение значение значение / значение значение значение значение;

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

<p>

Радиус всех углов границы равняется 15px

</p>

<p>

Радиус верхнего левого угла и правого нижнего угла границы равняется 15px, а радиус верхнего правого угла и нижнего левого угла границы равняется 2em

</p>

<p>

Радиус верхнего левого угла границы равняется 15px, радиус верхнего правого угла и нижнего левого угла границы равняется 2em, а радиус правого нижнего угла границы равняется 60%

</p>

<p>

Радиус верхнего левого угла границы равняется 15px, радиус верхнего правого угла границы равняется 2em, радиус нижнего правого угла границы равняется 60%, а радиус нижнего левого угла границы равняется 15%

</p>

<p>

Радиус всех углов границы равняется 15px по горизонтали и 50px по вертикали

</p>

<p>

Радиус верхнего левого угла и правого нижнего угла границы равняется 15px по горизонтали и 50px по вертикали, а радиус верхнего правого угла и нижнего левого угла границы равняется 2em по горизонтали и 3.5em по вертикали

</p>

<p>

Радиус верхнего левого угла границы равняется 15px по горизонтали и 50px по вертикали, радиус верхнего правого угла и нижнего левого угла границы равняется 2em по горизонтали и 3.5em по вертикали, а радиус правого нижнего угла границы равняется 60% по горизонтали и 27% по вертикали

</p>

<p>

Радиус верхнего левого угла границы равняется 15px по горизонтали и 50px по вертикали, радиус верхнего правого угла границы равняется 2em по горизонтали и 3.5em по вертикали, радиус нижнего правого угла границы равняется 60% по горизонтали и 27% по вертикали, а радиус нижнего левого угла границы равняется 15% по горизонтали и 49% по вертикали

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться