CSS-свойство `border-end-end-radius`

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

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

Попробуйте

border-end-end-radius: 80px 80px;

border-end-end-radius: 250px 100px;
direction: rtl;

border-end-end-radius: 50%;
writing-mode: vertical-lr;

border-end-end-radius: 50%;
writing-mode: vertical-rl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a bottom right rounded corner.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Синтаксис

/* <length> values */
/* With one value the corner will be a circle */
border-end-end-radius: 10px;
border-end-end-radius: 1em;

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

/* Global values */
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-percentage>

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

Формальное определение

Формальный синтаксис

border-end-end-radius = 
  <'border-top-left-radius'>

Примеры

Радиус скругления при вертикальном расположении текста

HTML

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

CSS

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

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

Результат

Спецификации

Совместимость с браузерами

См. также

• Логические свойства и значения CSS
• Соответствующее физическое свойство: border-bottom-right-radius
• writing-mode, direction, text-orientation