border-inline-width

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

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

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

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

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

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

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

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

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

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

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

Совместимостьcss.properties.border-inline-width

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
border-inline-width	✓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
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
Ещё 3 значений · ✓ поддерживаются везде более 3 летСвернуть

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

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

CSS синтаксис:

border-inline-width: <line-width>{1,2};

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

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

{1,2} означает одно или два значения: первое для начала оси, второе для конца. Одно значение применяется к обеим сторонам. <line-width> — толщина, <length [0,∞]> — неотрицательная длина. | разделяет варианты.

JavaScript синтаксис:

element.style.borderInlineWidth = "2px 8px";

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

• border-inline-start-width — medium.
• border-inline-end-width — medium.

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

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

При горизонтальном письме выбираются левая и правая стороны. Для dir="rtl" начало и конец строки меняются местами. При writing-mode: vertical-rl, direction: ltr и text-orientation: mixed начало строки находится сверху, конец — снизу.

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

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

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

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

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

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

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

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

CSS Logical Properties and Values — border-inline-width.

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

Наследуется

Нет.

Анимируемое

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

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

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

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

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-inline: 4px solid teal;
    border-inline-width: 2px 8px;
}