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

Предыдущая страница border-inline-color
Следующая страница border-inline-end-color

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

border-inline-end Свойства являются сокращением следующих свойств:

border-inline-end-width(Ширина рамки завершения вlined)
border-inline-end-style(Стиль рамки завершения вlined)
border-inline-end-color(Цвет рамки завершения вlined)

CSS border-inline-end Свойства соответствуют border-bottom、border-left、border-right и border-top Свойства очень похожи, но border-inline-end Свойства зависят от направления вlined.

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

Пример

Пример 1

Установить ширину, цвет и стиль рамки в конце инлайн-направления:

div {
  border-inline-end: 10px solid pink;
}

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

Пример 2: сочетание с свойством writing-mode

Позиция рамки в конце инлайн-направления зависит от writing-mode Влияние свойства:

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

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

Пример 3: сочетание с свойством direction

Позиция рамки в конце инлайн-направления зависит от direction Влияние свойства:

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

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

CSS синтаксис

border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color|initial|inherit;

Значение свойства

Значение	Описание
border-inline-end-width	Определить ширину рамки элемента в конце инлайн-направления. Значение по умолчанию - "medium".
border-inline-end-style	Определить стиль рамки элемента в конце инлайн-направления. Значение по умолчанию - "none".
border-inline-end-color	Определить цвет рамки элемента в конце инлайн-направления. Значение по умолчанию - текущий цвет рамки.

Значение

Описание

border-inline-end-width

Определить ширину рамки элемента в конце инлайн-направления.

Значение по умолчанию - "medium".

border-inline-end-style

Определить стиль рамки элемента в конце инлайн-направления.

Значение по умолчанию - "none".

border-inline-end-color

Определить цвет рамки элемента в конце инлайн-направления.

Значение по умолчанию - текущий цвет рамки.

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

initial	Установить это свойство в его значение по умолчанию. См. также initial.
inherit	Ингерит из родительского элемента. См. также inherit.
Значение по умолчанию:	medium none currentcolor
Ингерит:	Нет
Создание анимации:	Поддерживается. См. также:Свойства анимации.
Версия:	CSS3
JavaScript синтаксис:	object.style.borderInlineEnd="pink dotted 5px"