Установите цвет для границ в линейном направлении:
#example1 {
border-inline-style: solid;
border-inline-color: pink;
}
#example2 {
border-inline-style: solid;
border-inline-color: pink lightblue;
}
Попробуйте сами »
Определение border-inline-color
CSS свойство border-inline-color определяет цвет границ элемента во встроенном направлении.
Примечание: CSS свойство border-inline-color вступит в силу, когда будет установлено свойство border-inline-style.
Значения CSS свойства border-inline-color может быть задано различными способами:
Если свойство border-inline-color имеет два значения:
- border-inline-color: pink blue;
- цвет границы в начале строки - розовый
- цвет границы в конце строки - синий
Если свойство 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 определяет направление строки. Это влияет на то, где находятся начало и конец строки, а также на результат CSS свойства border-inline-color. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
| Значение по умолчанию: | текущий цвет элемента |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderInlineColor="pink" Попробуй |
Поддержка border-inline-color
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-inline-color | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Синтаксис border-inline-color
border-inline-color: color|transparent|initial|inherit;
Значения border-inline-color
| Значение | Описание | Демонстрация |
|---|---|---|
| color | Определяет цвет границы. Смотреть на CSS Значения цвета для получения полного списка возможных значений цвета. Цвет по умолчанию - текущий цвет элемента | Демо ❯ |
| transparent | Определяет, что цвет границы должен быть прозрачным | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-inline-color
Свойство writing-mode
На положение границ в начале и конце в линейном направлении влияет CSS свойство writing-mode:
div {
border-inline-style: solid;
writing-mode: vertical-rl;
border-inline-color: blue;
}
Попробуйте сами »
Свойство direction
На положение границ в начале и конце в линейном направлении влияет CSS свойство direction свойство:
div {
direction: rtl;
border-inline-color: blue hotpink;
}
Попробуйте сами »
Страницы по теме border-inline-color
CSS Учебник: CSS Границы
CSS border свойство: CSS border свойство
CSS border-inline свойство: CSS border-inline свойство
CSS border-inline-style свойство: CSS border-inline-style свойство
CSS border-bottom-color свойство: CSS border-bottom-color свойство
CSS border-left-color свойство: CSS border-left-color свойство
CSS border-right-color свойство: CSS border-right-color свойство
CSS border-top-color свойство: CSS border-top-color свойство
CSS direction свойство: CSS Direction свойство
CSS text-orientation свойство: CSS text-orientation свойство
CSS writing-mode свойство: CSS writing-mode свойство