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