border-block ⚡️ HTML и CSS с примерами кода
Свойство border-block
— это сокращенное свойство для установки значений свойств границы отдельного логического блока.
Демо
Логические границы- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-start-start-radius
- border-start-end-radius
- border-end-start-radius
- border-end-end-radius
border-block
можно использовать для установки значений для одного или нескольких параметров border-block-width
, border-block-style
и border-block-color
одновременно в начале и в конце блока. Физические границы, которым он сопоставляется, зависят от режима письма элемента, направленности и ориентации текста. Он соответствует свойствам
border-top
и border-bottom
или border-right
и border-left
в зависимости от значений, определенных для writing-mode
, direction
и text-orientation
.
Границы в другом измерении могут быть установлены с помощью border-inline
, который устанавливает border-inline-start
и border-inline-end
.
Синтаксис
Это свойство является сокращением для следующих свойств CSS:
border-block-color
border-block-style
border-block-width
border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; |
Значения
border-block задается одним или несколькими из следующих элементов в любом порядке:
border-width
- Ширина границы.
border-style
- Стиль линии границы.
color
- Цвет границы.
Определение
Начальное значение | border-top-width: medium border-top-style: none border-top-color: currentcolor |
Применяется ко | всем элементам |
Наследуется | нет |
Вычисленное значение | как определено |
Тип анимации | дискретный |
Поддержка браузерами
Пример
=== HTML
1 2 3 4 5 | ```html <div> <p>Example text</p> </div> ``` |
=== CSS
1 2 3 4 5 6 7 8 9 10 11 12 | ```css div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-rl; border-block: 5px dashed blue; } ``` |
=== Результат
 - CSS Logical Properties and Values Level 1 Spec (англ.)
border-block — CSS — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
Кратко
Скопированоborder
— это логическое свойство-шорткат. Он создаёт у элемента рамки по блочной оси.
Блочная ось связана с направлением потока сайта. Например, для русского и английского языков border
рисует границу сверху и снизу элемента (поток идёт сверху вниз), а для японского справа и слева (поток идёт справа налево).
Пример
Скопированоdiv { border-block: 5px solid white;}
div {
border-block: 5px solid white;
}
Открыть демо в новой вкладкеКак понять
СкопированоС помощью border
граница нарисуется всегда там, где нужно, вне зависимости от языка 😎
Допустим, мы хотим выделить текст сверху и снизу аккуратными границами. Попробуем сделать это с помощью свойств
border
и border
:
div { border-top: 7px dashed white; border-bottom: 7px dashed white;}Открыть демо в новой вкладкеdiv { border-top: 7px dashed white; border-bottom: 7px dashed white; }
А теперь текст будет на японском языке, для этого сменим поток и посмотрим, что будет:
div { writing-mode: vertical-rl;}
div {
writing-mode: vertical-rl;
}
Открыть демо в новой вкладкеЯзык другой, направление письма другое, а границы всё там же — сверху и снизу. Теперь используем правильное свойство border
и снова понаблюдаем:
div { writing-mode: vertical-rl; border-block: 7px dashed white;}
div {
writing-mode: vertical-rl;
border-block: 7px dashed white;
}
Открыть демо в новой вкладкеСейчас всё логично: стиль письма справа налево, и граница справа и слева текста, как мы и хотели.
border-block
обо всём позаботился!🧠
японское «鯖» из примеров переводится как «скумбрия».
Как пишется
Скопированоborder
пишется так же, как и border
, а ещё сокращает такие же свойства. Отличие лишь в том, что border
в записи заменяется на border
:
border
— ширина границы;- block - width border
— стиль границы;- block - style border
— цвет границы.- block - color
Можно отдельно стилизовать одну из границ по аналогии с border
и border
:
border
— первая граница по направлению блочной оси;- block - start border
— вторая граница.- block - end
Подсказки
Скопировано💡 Когда нужно, чтобы видимые границы блока разместились в противоположном блочной оси направлении, используйте свойство border
, — оно рисует видимые границы по направлению строчной оси.
div { border-inline: 5px solid white;}
div {
border-inline: 5px solid white;
}
Открыть демо в новой вкладке Оценка материалаЕсли вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
Предыдущий материал←
border
ctrl + alt + ←
Следующий материал→
border-inline
ctrl + alt + →
CS193X: Основы веб-программирования
Обзор
Это обзор блочных и встроенных правил, которые мы изучили в Лекции 2.
Это, пожалуй, самое важное правило в CSS для понимания. Пожалуйста, убедитесь, что эта концепция кристально ясна!
- Блочные элементы
- Высота и ширина блочных элементов
- Поток сверху вниз
- Встроенные элементы
- Высота и ширина встроенных элементов
- Поток слева направо
Блочные элементы
— это пример блочного элемента в HTML. Другие примеры включают -
,
,
,