css властивість border-bottom-right-radius
Властивість border-bottom-right-radius встановлює радіус округлення нижнього правого кута кордону. Якщо кордони не задані, то округлюватися буде фон.
Властивість border-bottom-right-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.
За допомогою border-radius можна встановити округлення для всіх кутів відразу.
Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.
Фон елементу, котрий може бути зображенням або кольором обрізається межею, й також округлюється. Точна позиція округлення визначається значенням заданим властивості background-clip.
- Нотатка
-
В якості радіусу вказується будь-яке припустиме в CSS значення (
автор: Svitlanapx, cm, in, emі ін.), чи відсотки, в цьому випадку радіус округлення рахується від ширини блоку. - Нотатка
-
Необов'язкове друге значення призначене для створення еліптичного кута, перше значення при цьому встановлює радіус по горизонталі, а друге - радіус по вертикалі. Якщо друге значення опущено воно копіюється з першого. Якщо будь-яке значення дорівнює нулю, то кут не буде округленим, а залишиться квадратним.
автор: Svitlana
Синтаксис
border-bottom-right-radius: length|% [length|%]|initial|inherit;Властивість border-bottom-right-radius може отримувати 4 значень:
-
length -
Визначає форму кута. Значення без задання дорівнює 0
автор: Svitlana -
% -
Визначає форму кута у відсотках.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderBottomRightRadius="25px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 4 | 5 | 10.5 | 12 | 9 | |
| відсотки | 4.0 | 4.0 | 5.0 | 10.5 | 9.0 | |
| еліптичні куточки | 1.0 | 3.5 | 3.0 | 10.5 | 9.0 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 4.2 | |
| відсотки | 2.1 | 4.0 | 5.0 | |
| еліптичні куточки | 2.1 | 3.5 | 3.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Заокруглюється лише нижній правий кут — решта лишаються прямими.
HTML
<div>Заокруглений тільки нижній правий кут.</div>CSS
div {
border: 2px solid;
border-bottom-right-radius: 2em;
padding: 12px;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Коментарі
Коментарів ще немає — будьте першим!