border-end-end-radius

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

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

Демо

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

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

• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

Синтаксис

/* <length> values */
/* С одним значением угол будет кружок */
border-end-end-radius: 10px;
border-end-end-radius: 1em;

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

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

Значения

<length>

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

Определение

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

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

Примеры

HTMLCSS

<div>
    <p class="exampleText">Example</p>
</div>

div {
    background-color: rebeccapurple;
    width: 120px;
    height: 120px;
    border-end-end-radius: 10px;
}

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

Ссылки

• Свойство border-end-end-radius ^{MDN (рус.)}
• CSS Logical Properties and Values Level 1 ^{Spec (англ.)}

Комментарии