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

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

border-inline-color свойство устанавливает цвет рамки элемента в строке в направлении строки.

связанные CSS свойствачтобы установить border-inline-color свойство вступает в силу, если установлено border-inline-style.

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

если border-inline-color у свойства есть два значения:

border-inline-color: розовый синий;
  • цвет рамки в начале строки равен розовому
  • цвет рамки в конце строки равен синему

если border-inline-color у свойства есть одно значение:

border-inline-color: blue;
  • цвет рамки в начале и в конце строки равен синему

CSS border-inline-color свойства и border-bottom-color,border-left-color,border-right-color и border-top-color Свойства очень похожи, но border-inline-color Обратите внимание:

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

Пример

Пример 1

Установить цвет рамки в направлении inline:

#example1 {
  border-inline-style: solid;
  border-inline-color: pink;
}
#example2 {
  border-inline-style: solid;
  border-inline-color: pink lightblue;
}

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

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

Бордарамки в направлении inline начинают и заканчиваются под влиянием writing-mode Влияние свойств:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

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

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

Бордарамки в направлении inline начинают и заканчиваются под влиянием direction Влияние свойств:

div {
  direction: rtl;
  border-inline-color: blue hotpink;
}

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

CSS синтаксис

border-inline-color: color|transparent|initial|inherit;

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

Значение Описание
color

Указать цвет рамки. По умолчанию цвет — текущий цвет элемента.

См. значения CSS цветов для получения полного списка возможных цветов.
transparent Указать цвет рамки должен быть прозрачным.
initial Set this property to its default value. См. также initial.
inherit Инherit this property from its parent element. См. также inherit.

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

Значение по умолчанию: Текущий цвет элемента
Унаследованность: Нет
Создание анимации: Поддержка. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.borderInlineColor="pink"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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