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

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

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

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

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

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

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

border-end-end-radius: 50px;

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

пример

пример 1

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

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

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

пример 2: сочетание с атрибутом direction

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

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

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

пример 3: сочетание с атрибутом writing-mode

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

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

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

CSS синтаксис

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

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

значение описание
0 по умолчанию
length определяет форму закругления в конце блочной и инлайн-направлений.
% округлая форма определена как процент от длины элемента по соответствующей оси.
initial установить этот атрибут в его значение по умолчанию. См. также initial.
inherit эта атрибут inherits от родительского элемента. См. также inherit.

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

по умолчанию: 0
наследование: нет
анимация: поддерживаются. См. также:атрибуты анимации.
версия: CSS3
JavaScript синтаксис: object.style.borderEndEndRadius="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