css властивість border-top-right-radius
Властивість border-top-right-radius задає верхнє праве округлення кута грані елемента.
Властивість border-top-right-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.
В якості радіуса вказується будь-яке припустиме в CSS значення (px, cm, in, em і ін.), а також відсотки, в цьому випадку радіус округлення рахується від ширини блоку.
Необов'язкове друге значення призначене для створення еліптичного куточка, перше значення при цьому встановлює радіус по горизонталі, а друге - радіус по вертикалі. Якщо друге значення опущено воно копіюється з першого. Якщо будь-яке значення дорівнює нулю, то кут буде квадратним, а не округленим.
Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.
Тло елементу, котре може бути зображенням або кольором обрізається гранями, й також округлюється. Точна позиція округлення визначається значенням заданим властивості background-clip.
| Нотатка: | За допомогою |
Синтаксис
border-top-right-radius: length|% [length|%]|initial|inherit;Властивість border-top-right-radius може отримувати 4 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderTopRightRadius="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-top-right-radius: 2em;
}