css властивість border-bottom-left-radius


Властивість border-bottom-left-radius встановлює радіус округлення нижнього лівого кута кордону. Якщо кордони не задані, то округллюється фон.

Властивість `border-bottom-left-radius`

Властивість border-bottom-left-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.

За допомогою border-radius можна встановити округлення для всіх кутів відразу.

Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.

Фон елементу, котрий може бути зображенням або кольором обрізається межею, й також округлюється. Точна позиція округлення визначається значенням заданим властивості background-clip.

Нотатка:

В якості радіуса вказується будь-яке припустиме в CSS значення (px, cm, in, em і ін.) чи відсотки, в цьому випадку радіус округлення рахується від ширини блоку.

Нотатка:

Необов'язкове друге значення призначене для створення еліптичного куточка, перше значення при цьому встановлює радіус по горизонталі, а друге - радіус по вертикалі. Якщо друге значення опущено воно копіюється з першого. Якщо будь-яке значення дорівнює нулю, то кут буде квадратним, а не округленим.

Синтакс

border-bottom-left-radius: length|% [length|%]|initial|inherit;

Властивість border-bottom-left-radius може отримувати 4 значення:

length

Визначає форму кута. Значення без задання дорівнює 0

%

Визначає форму кута у %

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання: 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; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів