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>. Проценты по горизонтальной оси относятся к ширине блока, проценты по вертикальной оси относятся к высоте блока. Отрицательные значения недействительны.

Определение¶

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

Примеры¶

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;
}

Ссылки¶

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

Комментарии