Перейти к содержанию

border-start-end-radius

Свойство border-start-end-radius определяет логический радиус границы элемента, который сопоставляется с физическим радиусом границы в зависимости от writing-mode, direction и text-orientation. Это полезно при создании стилей для работы независимо от ориентации текста и режима письма.

Демо

Это свойство влияет на угол между начальной и встроенной сторонами элемента. Например, в режиме записи horizontal-tb с направлением ltr это соответствует свойству border-top-right-radius.

Логические границы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* <length> values */
/* With one value the corner will be a circle */
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/* With two values the corner will be an ellipse */
border-start-end-radius: 1em 2em;

/* Global values */
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: revert;
border-start-end-radius: revert-layer;
border-start-end-radius: unset;

Значения

<length-percentage>

Обозначает размер радиуса окружности или большой и малой полуосей эллипса. Абсолютная длина может быть выражена в любых единицах, разрешенных типом данных CSS <length>. Проценты по горизонтальной оси относятся к ширине блока, проценты по вертикальной оси относятся к высоте блока. Отрицательные значения недействительны.

Поддержка браузерами

Примеры

HTML

1
2
3
<div>
    <p class="exampleText">Example</p>
</div>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
div {
    background-color: rebeccapurple;
    width: 120px;
    height: 120px;
    border-start-end-radius: 10px;
}

.exampleText {
    writing-mode: vertical-rl;
    padding: 10px;
    background-color: #fff;
    border-start-end-radius: 10px;
}

Ссылки

Комментарии