border-block

Определение и применение

Свойство border-block задаёт толщину, стиль и цвет границы в начале и в конце блочной оси. Стороны выбираются по направлению письма элемента.

Оси block и inline обозначают направление расположения блоков и направление строки. start — начало (англ. start), end — конец (англ. end) выбранной оси.

Подробнее об областях блока и направлении письма — в уроке «Блочная и строчная модель. Часть 1: области блока и отступы».

Попробуйте значения border-block

Сравните границы трёх блоков. Выберите значение, затем переключите направление письма: физическая сторона изменится по выбранной оси.

Значение свойства

border-block: 2px solid teal

HTML и CSS примера
HTML
<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target"><span>1</span></div>
    <div class="demo-target"><span>2</span></div>
    <div class="demo-target"><span>3</span></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 400px;
  color: #172c3d;
  font: 16px/1.5 system-ui;
  background: #fff;
  padding: 6px;
}
.container {
  display: flow-root;
  width: 100%;
  height: 210px;
  background: #fff0bf;
  outline: 1px dashed #64748b;
}
.demo-target {
  padding: 4px;
  background: #b9d7eb;
  border-block: 2px solid teal;
}
.demo-target span {
  display: block;
  background: #fff;
}

Поддержка браузерами

Спецификация: CSS logical

Поддерживается во всех основных браузерах с 2021 года.

Показать браузеры
Совместимостьcss.properties.border-block
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-block✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
currentColor✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
dashed✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
dotted✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
double✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
groove✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
hidden✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
inset✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
medium✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
none✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
outset✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
ridge✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
solid✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
thick✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
thin✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
transparent✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Значение hairline из CSS Borders Level 4 требует отдельной проверки поддержки. В примерах используется обычная длина.

CSS синтаксис:

CSS
border-block: <line-width> || <line-style> || <color>;

<line-width> = hairline | thin | medium | thick | <length [0,∞]>;

<line-style> = none | hidden | dotted | dashed | solid |
               double | groove | ridge | inset | outset;

/* Глобальные значения */
border-block: initial | inherit | unset | revert | revert-layer;

|| позволяет указать одну, две или три составляющие в любом порядке. <line-width> — толщина, <length [0,∞]> — неотрицательная длина. | разделяет варианты. <line-style> — рисунок линии, <color> — цвет.

JavaScript синтаксис:

JavaScript
element.style.borderBlock = "4px solid teal";

Начальное значение свойства

  • border-block-start-width — medium.
  • border-block-start-style — none.
  • border-block-start-color — currentcolor.
  • border-block-end-width — medium.
  • border-block-end-style — none.
  • border-block-end-color — currentcolor.

Значения свойства

Значения border-block
Значение Описание
<length> Неотрицательная длина: 0, 2px, 0.2rem. Проценты и auto не поддерживаются. При стиле none или hidden вычисленная толщина равна нулю.
thin | medium | thick Тонкая, средняя или толстая линия. Конкретные размеры определяет браузер, поэтому для точной толщины используйте длину.
hairline Минимальная видимая толщина из CSS Borders and Box Decorations Level 4. Новое значение требует отдельной проверки поддержки.
none | hidden Линия не рисуется, её толщина равна нулю. В таблице с border-collapse: collapse значение hidden подавляет конфликтующие границы, тогда как none имеет низший приоритет.
solid | dotted | dashed | double Сплошная, точечная, штриховая или двойная линия. У двойной границы заданная толщина включает обе линии и промежуток между ними.
groove | ridge | inset | outset Объёмные эффекты: вдавленная или выпуклая борозда, утопленная или приподнятая рамка. Результат зависит от толщины и цвета.
<color> Цвет, например teal, #245a85 или rgb(180 60 40). Он виден только при ненулевой толщине и стиле, который рисует линию.
currentcolor Использует вычисленное значение color этого элемента. Свойство границы при этом не становится наследуемым.
transparent Прозрачная линия: её не видно, но заданная толщина продолжает занимать место.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-block устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Как выбирается физическая сторона

При writing-mode: horizontal-tb выбираются верхняя и нижняя стороны, при writing-mode: vertical-rl — правая и левая. Смена только direction с ltr на rtl не меняет начало и конец блочной оси.

Логическое и физическое свойства, которые попали на одну сторону, конкурируют по обычным правилам каскада. Позднее сокращение может перезаписать ранее заданную составляющую.

Чем отличается от border-top, border-bottom, border, border-inline

  • border-top и border-bottom привязаны к физическим сторонам элемента. border-block выбирает стороны по направлению письма: при writing-mode: vertical-rl блочная ось идёт справа налево. Это позволяет использовать один стиль в разных режимах письма.
  • border задаёт границы всех четырёх сторон. border-block затрагивает только две стороны выбранной оси, сохраняя остальные.
  • border-block-start и border-block-end позволяют настраивать стороны отдельно. border-inline относится к другой оси и не заменяет border-block.
  • Для изменения только одной составляющей используйте border-block-width, border-block-style, border-block-color. Запись border-block: blue сбрасывает стиль к none, поэтому линия исчезнет. Цвет без сброса стиля меняет border-block-color.

Особенности применения

Толщина и цвет сами по себе не включают видимую границу: нужен стиль, например solid. Значения none и hidden дают нулевую толщину. Пропущенные составляющие сокращения возвращаются к начальным значениям.

border-block принимает один набор толщины, стиля и цвета для обеих сторон. Две отдельные тройки, например 2px solid red 4px dashed blue, недопустимы. Для разных рамок задайте border-block-start и border-block-end.

Спецификация

CSS Logical Properties and Values — border-block.

CSS Borders and Box Decorations Level 4 — расширения значений границ.

Наследуется

Нет.

Анимируемое

Зависит от составляющей: толщина и обычный цвет интерполируются, стиль линии переключается дискретно.

Примеры, попробуйте сами

Логическая граница при смене направления письма

Измените border-block у трёх блоков и сравните результат. В HTML замените dir="ltr" на dir="rtl", затем задайте контейнеру writing-mode: vertical-rl. Для блочной оси смена только ltr на rtl не меняет стороны.

base.css
CSS
body {
    margin: 16px;
    background: white;
}
* {
    box-sizing: border-box;
}
.stage {
    width: 100%;
    max-width: 400px;
    color: #172c3d;
    font: 16px/1.5 system-ui;
    background: #fff;
    padding: 6px;
}
.container {
    display: flow-root;
    width: 100%;
    height: 210px;
    background: #fff0bf;
    outline: 1px dashed #64748b;
}
.demo-target {
    padding: 4px;
    background: #b9d7eb;
}
.demo-target span {
    display: block;
    background: #fff;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Логическая граница при смене направления письма</title>
  </head>
  <body>
    <div class="stage">
      <div class="container" dir="ltr">
        <div class="demo-target"><span>1</span></div>
        <div class="demo-target"><span>2</span></div>
        <div class="demo-target"><span>3</span></div>
      </div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    writing-mode: horizontal-tb;
}
.demo-target {
    border-block: 4px solid teal;
}