css властивість border-bottom-left-radius
Властивість border-bottom-left-radius встановлює радіус округлення нижнього лівого кута кордону. Якщо кордони не задані, то округллюється фон.
Властивість border-bottom-left-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.
За допомогою border-radius можна встановити округлення для всіх кутів відразу.
Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.
Фон елементу, котрий може бути зображенням або кольором обрізається межею, й також округлюється. Точна позиція округлення визначається значенням заданим властивості background-clip.
| Нотатка: | В якості радіуса вказується будь-яке припустиме в CSS значення ( |
| Нотатка: | Необов'язкове друге значення призначене для створення еліптичного куточка, перше значення при цьому встановлює радіус по горизонталі, а друге - радіус по вертикалі. Якщо друге значення опущено воно копіюється з першого. Якщо будь-яке значення дорівнює нулю, то кут буде квадратним, а не округленим. |
Синтаксис
border-bottom-left-radius: length|% [length|%]|initial|inherit;Властивість border-bottom-left-radius може отримувати 4 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderBottomLeftRadius="25px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| базовий синтаксис | 4.0 |
9.0 |
4.0 |
5.0 |
10.5 |
| відсотки | 4.0 |
9.0 |
4.0 |
5.0 |
10.5 |
| еліптичні куточки | 1.0 |
9.0 |
3.5 |
3.0 |
10.5 |
| Переглядач | |||
|---|---|---|---|
| базовий синтаксис | 2.1 |
4.0 |
5.0 |
| відсотки | 2.1 |
4.0 |
5.0 |
| еліптичні куточки | 2.1 |
3.5 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрації роботи властивості
Демонстрації роботи властивості
Додавання округлого нижнього кута для елемента
div {
border: 2px solid;
border-bottom-left-radius: 2em;
}