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

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

border-inline-width атрибут устанавливает ширину рамки элемента в строке.

Примечание:Чтобы установить border-inline-width атрибут должен быть установлен, чтобы стать действительным: border-inline-style.

border-inline-width значение атрибута можно установить несколькими способами:

если border-inline-width атрибут имеет два значения:

border-inline-width: 10px 50px;
  • Ширина рамки в начале строки равна 10px
  • Ширина рамки в конце строки равна 50px

если border-inline-width атрибут имеет одно значение:

border-inline-width: 10px;
  • Ширина рамки в начале и в конце строки равна 10px

CSS border-inline-width атрибут и CSS-атрибут border-bottom-width,border-left-width,border-right-width и border-top-width Очень похожи, но border-inline-width Свойство зависит от направления строки.

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

Пример

Пример 1

Установите ширину рамки в направлении строки:

#example1 {
  border-inline-style: solid;
  border-inline-width: 10px;
}
#example2 {
  border-inline-style: dashed;
  border-inline-width: thin thick;
}

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

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

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

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-width: 5px;
}

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

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

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

div {
  direction: rtl;
  border-inline-width: 5px 15px;
}

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

Синтаксис CSS

border-inline-width: medium|thin|thick|length|initial|inherit;

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

Значение Описание
medium Определяет среднюю рамку. Значение по умолчанию.
thin Определяет тонкую рамку.
thick Определяет толстую рамку.
length Позволяет определить толщину рамки. См.:Единицы CSS.
initial Этот атрибут устанавливается в значение по умолчанию. См.: initial.
inherit Эта свойство наследуется от родительского элемента. См.: inherit.

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

Значение по умолчанию: medium
Инheritability: Нет
Создание анимации: Поддерживается. См.:Свойства анимации.
Версия: CSS3
Синтаксис JavaScript: object.style.borderInlineWidth="3px 10px"

Поддержка браузерами

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

Хром Эдж Фаерфокс Сафари Опера
87.0 87.0 66.0 14.1 73.0

Связанные страницы

Урок:Обрамление в CSS

См. также:Атрибут border CSS

См. также:Атрибут border-inline CSS

См. также:Свойство border-inline-style CSS

См. также:Атрибут border-bottom-width CSS

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

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

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

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

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

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