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


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

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

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

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

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

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

Нотатка:

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

Нотатка:

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

Синтаксис

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

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

length

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

%

Визначає форму кута у відсотках.

initial

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

inherit

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

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.borderBottomRightRadius="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-right-radius: 2em; 


}

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