border-inline-start

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

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

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

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

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

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

border-inline-start: 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-inline-start: 0 solid #a13610;
}
.demo-target span {
  display: block;
  padding: 6px;
  background: white;
}

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

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

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

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

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

JavaScript синтаксис:

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

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

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

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

Значения border-inline-start
Значение Описание
<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-inline-start устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

При горизонтальном письме слева направо это левая граница, при direction: rtl — правая. В вертикальном письме начало строки находится на вертикальной оси. Для компонента, который переводится на разные языки, это избавляет от отдельного переопределения border-left.

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

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

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

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

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

Наследуется

Нет.

Анимируемое

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

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

Полоса у начала заметки

Замените dir="ltr" на dir="rtl": полоса окажется справа. Поменяйте solid на dashed и увеличьте толщину.

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-inline-start: 4px solid teal;
}