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


Властивість border-top-right-radius задає верхнє праве округлення кута грані елемента.

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

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

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

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

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

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

Нотатка:

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

Синтаксис

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

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

length

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

%

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

initial

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

inherit

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

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


}

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