border-inline-width
Установите ширину границ в линейном направлении:
#example1 {
border-inline-style: solid;
border-inline-width: 10px;
}
#example2 {
border-inline-style: dashed;
border-inline-width: thin thick;
}
Попробуйте сами »
Определение border-inline-width
CSS свойство border-inline-width
определяет ширину границ элемента во встроенном направлении.
Примечание: CSS свойство border-inline-width
вступит в силу, когда будет установлено свойство border-inline-style
.
Значения CSS свойства border-inline-width
может быть задано различными способами:
Если свойство border-inline-width имеет два значения:
- border-inline-width: 10px 50px;
- ширина границы в начале строки составляет 10 пикселей
- ширина границы в конце строки составляет 50 пикселей
Если свойство border-inline-width имеет одно значение:
- border-inline-width: 10px;
- ширина границы в начале и конце строки составляет 10 пикселей
CSS свойство
border-inline-width
очень похоже на свойства
border-bottom-width
,
border-left-width
,
border-right-width
и
border-top-width
, но свойство
border-inline-width
зависит от встроенного направления.
Примечание: Связанные CSS свойства
writing-mode
,
text-orientation
и
direction
определяет направление строки. Это влияет на то, где находятся начало и конец строки, а также на результат CSS свойства border-inline-width
. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
Значение по умолчанию: | medium |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Читайте о animatable Попробуй |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.borderInlineWidth="3px 10px" Попробуй |
Поддержка border-inline-width
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
border-inline-width | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Синтаксис border-inline-width
border-inline-width: medium|thin|thick|length|initial|inherit;
Значения border-inline-width
Значение | Описание | Демонстрация |
---|---|---|
medium | Определяет среднюю границу. Это значение по умолчанию | Демо ❯ |
thin | Определяет тонкую границу | Демо ❯ |
thick | Определяет толстую границу | Демо ❯ |
length | Позволяет определить толщину границы. Читайте о единицы измерения длины | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-inline-width
На положение границ в начале и конце в линейном направлении влияет CSS свойство writing-mode
:
div {
border-inline-style: solid;
writing-mode: vertical-rl;
border-inline-width: 5px;
}
Попробуйте сами »
На положение границ в начале и конце в линейном направлении влияет CSS свойство direction
свойство:
div {
direction: rtl;
border-inline-width: 5px 15px;
}
Попробуйте сами »
Страницы по теме border-inline-width
CSS Учебник: CSS Границы
CSS border свойство: CSS border свойство
CSS border-inline свойство: CSS border-inline свойство
CSS border-inline-style свойство: CSS border-inline-style свойство
CSS border-bottom-width свойство: CSS border-bottom-width свойство
CSS border-left-width свойство: CSS border-left-width свойство
CSS border-right-width свойство: CSS border-right-width свойство
CSS border-top-width свойство: CSS border-top-width свойство
CSS direction свойство: CSS Direction свойство
CSS text-orientation свойство: CSS text-orientation свойство
CSS writing-mode свойство: CSS writing-mode свойство