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