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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с сентября 2021 года.

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

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

Попробуйте

border-start-start-radius: 80px 80px;

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

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

border-start-start-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 top left 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-start-start-radius: 10px;
border-start-start-radius: 1em;

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

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

Значения

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

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

Начальное значение	0
Применяется к	всем элементам; однако пользовательские агенты не обязаны применять свойство к элементам <code>table</code> и <code>inline-table</code>, если значение `border-collapse` равно <code>collapse</code>. Поведение для внутренних элементов таблицы пока не определено.
Наследуется	нет
Проценты	относятся к соответствующему измерению рамки границы
Вычисленное значение	две абсолютные величины типа `<length>` или `<percentage>`
Тип анимации	$1$, <a href="/en-US/docs/Web/CSS/Reference/Values/percentage#interpolation" title="Значения CSS-типа данных <percentage> интерполируются как вещественные числа с плавающей точкой.">проценты</a> или calc();

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

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

Примеры

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

HTML

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

CSS

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

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

Результат

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

Спецификация
Модуль логических свойств и значений CSS, уровень 1 # border-radius-properties

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`border-start-start-radius`	89	89	66	75	15	89	66	63	15	15.0	89	15

См. также

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

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-start-start-radius