Установите стиль, цвет и ширину границ для различных элементов в линейном направлении
h1 {
border-inline: 5px solid red;
}
h2 {
border-inline: 4px dotted blue;
}
div {
border-inline:
double;
}
Попробуйте сами »
Определение border-inline
CSS свойство border-inline - это сокращенное название этих свойств:
Если значения для цвета или ширины опущены, будут использоваться значения по умолчанию.
CSS свойство
border-inline очень похоже на свойство
border, но свойство
border-inline зависит от встроенного направления.
Примечание: Связанные CSS свойства
writing-mode,
text-orientation и
direction определите направление строки. Это влияет на то, где находятся начало и конец строки, а также на результат CSS свойства border-inline. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
| Значение по умолчанию: | medium none color |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes, see individual properties. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderInline="dashed hotpink 10px" Попробуй |
Поддержка border-inline
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-inline | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Синтаксис border-inline
border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;
Значения border-inline
| Значение | Описание | Демонстрация |
|---|---|---|
| border-inline-width | Определяет ширину границ во встроенном направлении. Значение по умолчанию равно "medium" | Демо ❯ |
| border-inline-style | Определяет стиль границ во встроенном направлении. Значение по умолчанию - "none" | Демо ❯ |
| border-inline-color | Определяет цвет границ во встроенном направлении. Значение по умолчанию - цвет текста | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-inline
Свойство writing-mode
На положение границ в начале и конце в линейном направлении влияет CSS свойство writing-mode:
div {
writing-mode: vertical-rl;
border-inline: hotpink dashed 8px;
}
Попробуйте сами »
Страницы по теме border-inline
CSS Учебник: CSS Границы
CSS border свойство: CSS border свойство
CSS border-inline-color свойство: CSS border-inline-color свойство
CSS border-inline-style свойство: CSS border-inline-style свойство
CSS border-inline-width свойство: CSS border-inline-width свойство
CSS direction свойство: CSS Direction свойство
CSS text-orientation свойство: CSS text-orientation свойство
CSS writing-mode свойство: CSS writing-mode свойство