border-inline-end

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

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

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

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

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

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

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

border-inline-end: 2px solid teal

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

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

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

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

Показать браузеры
Совместимостьcss.properties.border-inline-end
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-inline-end✓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 Borders Level 4 требует отдельной проверки поддержки. В примерах используется обычная длина.

CSS синтаксис:

CSS
border-inline-end: <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-end: initial | inherit | unset | revert | revert-layer;

|| позволяет указать одну, две или три составляющие в любом порядке. <line-width> — толщина, <length [0,∞]> — неотрицательная длина. | разделяет варианты. <line-style> — рисунок линии, <color> — цвет.

JavaScript синтаксис:

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

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

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

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

Значения border-inline-end
Значение Описание
<length> Неотрицательная длина: 0, 2px, 0.2rem. Проценты и auto не поддерживаются. При стиле none или hidden вычисленная толщина равна нулю.
thin | medium | thick Тонкая, средняя или толстая линия. Конкретные размеры определяет браузер, поэтому для точной толщины используйте длину.
hairline Минимальная видимая толщина из CSS Borders and Box Decorations Level 4. Новое значение требует отдельной проверки поддержки.
none | hidden Линия не рисуется, её толщина равна нулю. В таблице с border-collapse: collapse значение hidden подавляет конфликтующие границы, тогда как none имеет низший приоритет.
solid | dotted | dashed | double Сплошная, точечная, штриховая или двойная линия. У двойной границы заданная толщина включает обе линии и промежуток между ними.
groove | ridge | inset | outset Объёмные эффекты: вдавленная или выпуклая борозда, утопленная или приподнятая рамка. Результат зависит от толщины и цвета.
<color> Цвет, например teal, #245a85 или rgb(180 60 40). Он виден только при ненулевой толщине и стиле, который рисует линию.
currentcolor Использует вычисленное значение color этого элемента. Свойство границы при этом не становится наследуемым.
transparent Прозрачная линия: её не видно, но заданная толщина продолжает занимать место.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-inline-end устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

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

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

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

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

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

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

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

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

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

Наследуется

Нет.

Анимируемое

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

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

Логическая граница при смене направления письма

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