Радиус левого нижнего угла: border-bottom-left-radius

border-bottom-left-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-bottom-left-radius — это свойство задает радиус для левого нижнего угла границы элемента
Описание
Границы позволяют выделить текст из общего потока, придать ему особенное значение, украшают его
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам за исключением когда для элементов table и inline-table применено свойство border-collapse со значением collapse
Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | inherit
Значение по умолчанию
0
Правила записи

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


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

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

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

<p>

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

</p>

<p>

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

</p>

<p>

Радиус нижнего левого угла границы равняется 50% от размера контейнера

</p>

<p>

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

</p>

<p>

Радиус нижнего левого угла границы равняется 1.5em по горизонтали и 3em по вертикали

</p>

<p>

Радиус нижнего левого угла границы равняется 70% по горизонтали и 90% по вертикали

</p>

Поделиться