border-inline-style

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

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

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

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

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

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

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

border-inline-style: solid

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

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

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

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

Показать браузеры
Совместимостьcss.properties.border-inline-style
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-inline-style✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
dashed✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
dotted✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
double✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
groove✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
hidden✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
inset✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
none✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
outset✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
ridge✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
solid✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5

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

CSS синтаксис:

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

<line-style> = none | hidden | dotted | dashed | solid |
               double | groove | ridge | inset | outset;

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

{1,2} означает одно или два значения: первое для начала оси, второе для конца. Одно значение применяется к обеим сторонам. <line-style> — одно из перечисленных ключевых слов, задающих рисунок линии. | разделяет варианты.

JavaScript синтаксис:

JavaScript
element.style.borderInlineStyle = "solid dashed";

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

  • border-inline-start-style — none.
  • border-inline-end-style — none.

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

Значения border-inline-style
Значение Описание
none | hidden Линия не рисуется, её толщина равна нулю. В таблице с border-collapse: collapse значение hidden подавляет конфликтующие границы, тогда как none имеет низший приоритет.
solid | dotted | dashed | double Сплошная, точечная, штриховая или двойная линия. У двойной границы заданная толщина включает обе линии и промежуток между ними.
groove | ridge | inset | outset Объёмные эффекты: вдавленная или выпуклая борозда, утопленная или приподнятая рамка. Результат зависит от толщины и цвета.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-inline-style устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

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

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

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

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

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

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

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

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

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

Наследуется

Нет.

Анимируемое

Стиль линии переключается дискретно, без промежуточного рисунка.

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

Вид линии при смене направления письма

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