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

border-end-start-radius

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

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

Демо

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

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* <length> values */
/* С одним значением угол будет кружок */
border-end-start-radius: 10px;
border-end-start-radius: 1em;

/* С двумя значениями в углу будет эллипс */
border-end-start-radius: 1em 2em;

/* Глобальные значения */
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-radius: unset;

Значения

<длина>

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

Определение

Начальное значение 0
Применяется ко всем элементам
Наследуется нет
Вычисленное значение два абсолютных значения <length> или <percentage>
Тип анимации длина, процент или calc();

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

Примеры

1
2
3
<div>
    <p class="exampleText">Example</p>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
div {
    background-color: rebeccapurple;
    width: 120px;
    height: 120px;
    border-end-start-radius: 10px;
}

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

Ссылки

Комментарии