border-block-color

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

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

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

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

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

<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>

<div class="stage">
  <div class="container" dir="rtl" 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>

<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: vertical-rl">
    <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>

* {
  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: 4px solid teal;
  border-block-color: teal;
}
.demo-target span {
  display: block;
  background: #fff;
}

* {
  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: 4px solid teal;
  border-block-color: transparent;
}
.demo-target span {
  display: block;
  background: #fff;
}

* {
  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: 4px solid teal;
  border-block-color: teal tomato;
}
.demo-target span {
  display: block;
  background: #fff;
}

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

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

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

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.border-block-color

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
border-block-color	✓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
transparent	✓87	✓87	✓66	✓73	✓14.1	✓87	✓66	✓62	✓14.5	✓14.0	✓87	✓14.5

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

Обычные цвета поддерживаются широко. Расширение <image-1D> и функция stripes() требуют отдельной проверки поддержки и не нужны для примеров этой статьи.

CSS синтаксис:

border-block-color: [ <color> | <image-1D> ]{1,2};

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

{1,2} означает одно или два значения: первое для начала оси, второе для конца. Одно значение применяется к обеим сторонам. <color> — обычный CSS-цвет, <image-1D> — одномерное изображение из нового расширения. | разделяет варианты, квадратные скобки группируют их.

JavaScript синтаксис:

element.style.borderBlockColor = "teal tomato";

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

• border-block-start-color — currentcolor.
• border-block-end-color — currentcolor.

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

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

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

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

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

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

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

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

Связанные логические свойства

• border-block
• border-block-width
• border-block-style
• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color

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

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

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

Наследуется

Нет.

Анимируемое

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

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

Цвет линии без изменения её толщины

Измените border-block-color у трёх блоков и сравните результат. В 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;
    border-block-color: teal tomato;
}