border-block-style
Установите стиль для границ в направлении блока:
#example1 {
border-block-style: solid;
}
#example2 {
border-block-style: dashed dotted;
}
Попробуйте сами »
Определение border-block-style
CSS свойство border-block-style
определяет стиль границ элемента в направлении блока.
Значения CSS свойства border-block-style
может быть задано различными способами:
Если свойство border-block-style имеет два значения:
- border-block-style: dashed dotted;
- стиль границы в начале блока обозначен dashed
- стиль границы в конце блока обозначен dotted
Если свойство border-block-style имеет одно значение:
- border-block-style: dashed;
- стиль границы в начале и конце блока - dashed
CSS свойство
border-block-style
очень похоже на свойства
border-bottom-style
,
border-left-style
,
border-right-style
и
border-top-style
, но свойство
border-block-style
зависит от направления блока.
Примечание: Связанное CSS свойство writing-mode
определяет направление блока. Это влияет на то, где находятся начало и конец блока, а также на результат свойства border-block-style
. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
Значение по умолчанию: | none |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.borderBlockStyle="dotted" Попробуй |
Поддержка border-block-style
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
border-block-style | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Синтаксисborder-block-style
border-block-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значения border-block-style
Значение | Описание | Демонстрация |
---|---|---|
none | Значение по умолчанию. Не определяет границы | Демо ❯ |
hidden | То же, что и "none", за исключением разрешения пограничных конфликтов для элементов таблицы | Демо ❯ |
dotted | Определяет пунктирную границу | Демо ❯ |
dashed | Определяет пунктирную границу | Демо ❯ |
solid | Определяет сплошную границу | Демо ❯ |
double | Определяет двойную границу | Демо ❯ |
groove | Определяет трехмерную рифленую границу. Эффект зависит от значения border-color | Демо ❯ |
rigde | Определяет трехмерную ребристую границу. Эффект зависит от значения border-color | Демо ❯ |
inset | Определяет границу трехмерной вставки. Эффект зависит от значения border-color | Демо ❯ |
outset | Определяет трехмерную начальную границу. Эффект зависит от значения border-colore | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-block-style
Свойство writing-mode
На положение стиля границы в начале и конце в направлении блока влияет CSS свойство writing-mode
:
div {
writing-mode: vertical-rl;
border-block-style: dotted;
}
Попробуйте сами »
Страницы по темеborder-block-style
CSS Учебник: CSS Границы
CSS border свойство: CSS border свойство
CSS border-block свойство: CSS border-block свойство
CSS border-block-end-style свойство: CSS border-block-end-style свойство
CSS border-block-start-style свойство: CSS border-block-start-style свойство
CSS border-bottom-style свойство: CSS border-bottom-style свойство
CSS border-left-style свойство: CSS border-left-style свойство
CSS border-right-style свойство: CSS border-right-style свойство
CSS border-top-style свойство: CSS border-top-style свойство
CSS writing-mode свойство: CSS writing-mode свойство