border-block-start-width

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

Свойство border-block-start-width задаёт толщину границы в начале блочной оси. Остальные стороны сохраняют свои значения.

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

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

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

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

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

border-block-start-width: 2px

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

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

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

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

Показать браузеры
Совместимостьcss.properties.border-block-start-width
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-block-start-width✓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
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

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

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

CSS синтаксис:

CSS
border-block-start-width: <line-width>;

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

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

<line-width> — толщина, <length [0,∞]> — неотрицательная длина. | разделяет варианты.

JavaScript синтаксис:

JavaScript
element.style.borderBlockStartWidth = "8px";

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

medium.

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

Значения border-block-start-width
Значение Описание
<length> Неотрицательная длина: 0, 2px, 0.2rem. Проценты и auto не поддерживаются. При стиле none или hidden вычисленная толщина равна нулю.
thin | medium | thick Тонкая, средняя или толстая линия. Конкретные размеры определяет браузер, поэтому для точной толщины используйте длину.
hairline Минимальная видимая толщина из CSS Borders and Box Decorations Level 4. Новое значение требует отдельной проверки поддержки.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-block-start-width устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

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

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

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

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

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

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

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

CSS Logical Properties and Values — border-block-start-width.

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

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные числовые значения рассчитываются плавно.

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

Толщина линии при смене направления письма

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