Свойство CSS border-bottom-left-radius
Свойство border-bottom-left-radius задаёт скругление нижнего левого угла элемента.
Свойство border-bottom-left-radius является одним из свойств CSS3.
Если значение не указано, угол остаётся прямым. При указании значения создаётся четверть эллипса. Если используется фоновое изображение или цвет, оно будет обрезано по границе. Процесс обрезки определяется значением свойства background-clip.
Свойство border-bottom-left-radius принимает два значения: длину и процент. Если указано одно значение, оно задаёт как горизонтальный, так и вертикальный радиусы эллипса. Если указаны два значения, первое задаёт горизонтальный радиус, а второе — вертикальный.
Проценты для горизонтального радиуса относятся к ширине блока, проценты для вертикального радиуса — к его высоте. Отрицательные значения не допускаются.
Если после border-bottom-left-radius применяется сокращённое свойство border-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 со значением в пикселях
<!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>Пример свойства 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' в CSS?