border-block
Установите стиль, цвет и ширину границ для различных элементов в направлении блока:
h1 {
border-block: 5px solid red;
}
h2 {
border-block: 4px dotted blue;
}
div {
border-block:
double;
}
Попробуйте сами »
Определение border-block
CSS свойство border-block
- это сокращенное название этих свойств:
border-block-width
border-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 свойство