Свойство CSS border-bottom-left-radius
CSS border-bottom-left-radius скругляет нижний левый угол элемента. Синтаксис, значения и примеры.
Свойство border-bottom-left-radius задаёт скругление нижнего левого угла элемента.
Свойство border-bottom-left-radius является одним из свойств CSS3.
Если значение не указано, угол остаётся прямым. При наличии значения создаётся четверть эллипса. Если используется фоновое изображение или цвет, они обрезаются по границе. Способ обрезки определяется значением свойства background-clip.
Свойство border-bottom-left-radius принимает два значения: длину и процент. Если указано только одно значение, оно задаёт как горизонтальный, так и вертикальный радиусы эллипса. Если указаны два значения, первое задаёт горизонтальный радиус, а второе — вертикальный.
Проценты для горизонтального радиуса относятся к ширине блока, а для вертикального — к его высоте. Отрицательные значения не допускаются.
Если сокращённое свойство border-radius применяется после border-bottom-left-radius, оно переопределяет значение отдельного свойства. По этой причине при индивидуальной установке углов объявляйте их после сокращённого border-radius. Свойство border-bottom-left-radius наиболее полезно, когда нужно скруглить только один угол элемента — например, для пузыря чата, карточки с одним скруглённым углом или кнопки нестандартной формы — оставив три остальных угла прямыми.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Радиус нижнего левого угла границы анимируется. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.borderBottomLeftRadius = "35px"; |
Синтаксис
Синтаксис свойства CSS border-bottom-left-radius
border-bottom-left-radius: length| % | initial | inherit;Пример свойства border-bottom-left-radius:
Пример свойства CSS border-bottom-left-radius со значением в px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Результат
Пример свойства border-bottom-left-radius с двумя значениями:
Пример свойства CSS border-bottom-left-radius с двумя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Здесь 30px — горизонтальный радиус, а 15px — вертикальный, что создаёт эллиптический (не круговой) угол, который шире, чем он высок.
Пример свойства border-bottom-left-radius со значением в процентах:
Пример свойства CSS border-bottom-left-radius со значением %(процент)
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| length | Задаёт скругление нижнего левого угла в «px». | Попробуйте » |
| % | Задаёт скругление нижнего левого угла в процентах. | Попробуйте » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробуйте » |
| inherit | Наследует свойство от родительского элемента. |
Поддержка браузерами
Свойство border-bottom-left-radius поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и Opera. Вендорные префиксы сегодня не нужны.
Связанные свойства
border-bottom-left-radius управляет одним углом. Чтобы скруглить другие углы или все сразу, используйте следующие связанные свойства:
- border-radius — сокращение, задающее все четыре угла в одном объявлении.
- border-bottom-right-radius — скругляет нижний правый угол.
- border-top-left-radius — скругляет верхний левый угол.
- border-top-right-radius — скругляет верхний правый угол.