Свойство border-start-end-radius CSS

определение и использование

border-start-end-radius свойство используется для определения радиуса закругления между началом блока (block-start) и концом строки (inline-end).

внимание:связанные CSS свойства writing-mode,text-orientation и direction определяет вектор блока и вектор строки. Вот почему эти свойства также влияют на border-start-end-radius результат свойств. Для английских страниц, вектор строки направлен слева направо, а вектор блока — вниз.

если border-start-end-radius если свойство имеет два значения, то закругление будет эллиптичным:

border-start-end-radius: 50px 100px;

если border-start-end-radius если свойство имеет значение, то закругление будет круглым:

border-start-end-radius: 50px;

CSS border-start-end-radius свойства и border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius и border-top-right-radius Атрибуты очень похожи, но border-start-end-radius Атрибут зависит от блочного направления и инлайн-направления.

Пример

Пример 1

Добавить закругления углов в начале блочного направления и в конце инлайн-направления для некоторых элементов:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}

Попробуйте сами

Пример 2: Комбинация атрибута direction

Положение закругления углов в начале блочного направления и в конце инлайн-направления зависит от direction Влияние атрибута:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}

Попробуйте сами

Пример 3: Комбинация атрибута writing-mode

Положение закругления углов в начале блочного направления и в конце инлайн-направления зависит от writing-mode Влияние атрибута:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}

Попробуйте сами

CSS синтаксис

border-start-end-radius: 0|length|initial|inherit;

Значение атрибута

Значение Описание
0 Значение по умолчанию.
length Определяет форму закругления углов в начале блочного направления и в конце инлайн-направления. См. также:Единицы CSS.
% Определяет форму закругления углов, используя процент от длины элемента по соответствующей оси.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Инherits этот атрибут от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: 0
Инheritability: Нет
Создание анимации: Поддерживается. См. также:Атрибуты анимации.
Версия: CSS3
JavaScript синтаксис: object.style.borderStartEndRadius="50px"

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
89.0 89.0 66.0 15.0 75.0

Соответствующие страницы

Учебное пособие:Круглые углы в CSS

См. также:Свойство border-bottom-left-radius CSS

См. также:Свойство border-bottom-right-radius CSS

См. также:Свойство border-top-left-radius CSS

См. также:Свойство border-top-right-radius CSS

См. также:Свойство direction в CSS

См. также:Свойство text-orientation в CSS

См. также:Свойство writing-mode в CSS