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

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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

length

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

автор: Svitlana

правити

%

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
базовий синтаксис	4.0	4.0	5.0	10.5	9.0
відсотки	4.0	4.0	5.0	10.5	9.0
еліптичні куточки	1.0	3.5	3.0	10.5	9.0

Підтримка: мобільні переглядачі

Переглядач
базовий синтаксис	2.1	4.0	5.0
відсотки	2.1	4.0	5.0
еліптичні куточки	2.1	3.5	3.0

Приклади

+ запропонувати свій приклад у пісочниці

<div>Заокруглений тільки верхній лівий кут.</div>

div {
    border: 2px solid;
    border-top-left-radius: 2em;
    padding: 12px;
}