border-inline-end-color

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

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

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

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

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

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

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

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

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

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

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

Показать браузеры
Совместимостьcss.properties.border-inline-end-color
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-inline-end-color✓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
transparent✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2

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

Обычные цвета поддерживаются широко. Расширение <image-1D> и функция stripes() требуют отдельной проверки поддержки и не нужны для примеров этой статьи.

CSS синтаксис:

CSS
border-inline-end-color: [ <color> | <image-1D> ];

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

<color> — обычный CSS-цвет, <image-1D> — одномерное изображение из нового расширения. | разделяет варианты, квадратные скобки группируют их.

JavaScript синтаксис:

JavaScript
element.style.borderInlineEndColor = "tomato";

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

currentcolor.

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

Значения border-inline-end-color
Значение Описание
<color> Цвет, например teal, #245a85 или rgb(180 60 40). Он виден только при ненулевой толщине и стиле, который рисует линию.
currentcolor Использует вычисленное значение color этого элемента. Свойство границы при этом не становится наследуемым.
transparent Прозрачная линия: её не видно, но заданная толщина продолжает занимать место.
<image-1D> Экспериментальное расширение CSS Borders Level 4, например stripes(red, blue): несколько цветных полос. Поддержку проверяют отдельно от обычного цвета.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-inline-end-color устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

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

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

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

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

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

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

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

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

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

Наследуется

Нет.

Анимируемое

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

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

Цвет линии без изменения её толщины

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