CSS border-inline-start свойство

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

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

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

CSS border-inline-start свойства совпадают с CSS свойствами border-bottom、border-left、border-right и}} border-top очень похожи, но border-inline-start свойства зависят от инлайн-ориентации.

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

Пример

Пример 1

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

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

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

Пример 2: В сочетании с атрибутом writing-mode

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

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

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

Пример 3: В сочетании с атрибутом direction

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

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

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

CSS синтаксис

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

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

Значение	Описание
border-inline-start-width	Указывает ширину рамки элемента в начале строкового направления. Значение по умолчанию - medium.
border-inline-start-style	Указывает стиль рамки элемента в начале строкового направления. Значение по умолчанию - none.
border-inline-start-color	Указывает цвет рамки элемента в начале строкового направления. Значение по умолчанию - текущий цвет рамки.
initial	Этот атрибут устанавливается в значение по умолчанию. См. также initial.
inherit	Этот атрибут наследуется из родительского элемента. См. также inherit.

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

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