border-block-end

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

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

Как задавать рамки отдельных сторон и учитывать направление письма — в уроке «Границы элемента в CSS».

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

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

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

border-block-end: 0 solid #a13610

HTML и CSS примера
HTML
<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target"><span>Начало → конец</span></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  display: flow-root;
  width: 100%;
  min-height: 175px;
  background: #fff0bf;
  border: 1px dashed #6d5d32;
}
.demo-target {
  width: fit-content;
  background: #b9d7eb;
  outline: 1px solid #245a85;
  border-block-end: 0 solid #a13610;
}
.demo-target span {
  display: block;
  padding: 6px;
  background: white;
}

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

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

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

Показать браузеры
Совместимостьcss.properties.border-block-end
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-block-end✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
currentColor✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
dashed✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
dotted✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
double✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
groove✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
hidden✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
inset✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
medium✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
none✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
outset✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
ridge✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
solid✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
thick✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
thin✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
transparent✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2

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

Значение толщины hairline относится к новому расширению синтаксиса и требует отдельной проверки поддержки.

CSS синтаксис:

CSS
border-block-end: <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-end: initial | inherit | unset | revert | revert-layer;

|| позволяет указать одну, две или три части в любом порядке; | разделяет варианты. <length [0,∞]> — неотрицательная длина, <color> — цвет. Например, 4px solid teal.

JavaScript синтаксис:

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

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

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

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

Значения border-block-end
Значение Описание
<line-width> Толщина границы: длина либо thin, medium, thick. Проценты не поддерживаются. При стиле none или hidden используемая толщина равна нулю.
<line-style> solid — сплошная, dotted — точечная, dashed — штриховая, double — двойная. groove, ridge, inset, outset создают объёмный вид. none и hidden не рисуют границу; при схлопывании границ таблицы hidden имеет особый приоритет.
<color> Цвет линии. currentcolor использует вычисленное значение color этого элемента.
hairline Новая минимальная толщина из CSS Borders and Box Decorations Level 4. Поддержка ограничена; для совместимого примера задавайте длину.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-block-end устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

При writing-mode: horizontal-tb это нижняя граница и для русского, и для арабского текста. При vertical-rl конец блочной оси находится слева. Смена только direction не превращает нижнюю границу в верхнюю.

Сокращение сбрасывает пропущенные составляющие. После border-block-end: 5px solid red запись border-block-end: blue уберёт линию, потому что стиль вернётся к none. Для изменения только цвета задавайте соответствующее свойство с окончанием -color. Логическая и физическая границы одной стороны участвуют в одном каскаде.

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

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

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

CSS Logical Properties and Values — border-block-end.

Наследуется

Нет.

Анимируемое

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

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

Линия после заголовка

Поменяйте writing-mode на vertical-rl: линия перейдёт к левому краю. Уберите solid: граница исчезнет, хотя толщина и цвет заданы.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.note {
    max-width: 26rem;
    padding: 16px;
    background: #f0fdfa;
}
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="note" dir="ltr">Тони собрал заметки о лесных тропах.</div>
  </body>
</html>
style.css
CSS
.note {
    writing-mode: horizontal-tb;
    border-block-end: 4px solid teal;
}