Свойство CSS `border-inline`

border-inline CSS — это сокращённое свойство, которое задаёт значения отдельных логических свойств границ по inline-оси в одном месте таблицы стилей.

Попробуйте

border-inline: solid;
writing-mode: horizontal-tb;

border-inline: dashed red;
writing-mode: vertical-rl;

border-inline: 1rem solid;
writing-mode: horizontal-tb;
direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

• border-inline-color
• border-inline-style
• border-inline-width

Синтаксис

border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

/* Global values */
border-inline: inherit;
border-inline: initial;
border-inline: revert;
border-inline: revert-layer;
border-inline: unset;

Значения

Значение border-inline задаётся одним или несколькими из следующих значений в произвольном порядке:

<line-width>

Ширина границы. См. border-width.

<line-style>

Стиль линии границы. См. border-style.

color

Цвет границы.

Описание

Физические границы, которым соответствует border-inline, зависят от режима письма, направления текста и его ориентации для элемента. Оно соответствует свойствам border-top и border-bottom либо border-right и border-left — в зависимости от значений, заданных для writing-mode, direction и text-orientation.

Границы по другому измерению можно задать с помощью border-block, которое задаёт свойства border-block-start и border-block-end.

Формальное определение

Формальный синтаксис

border-inline = 
  <'border-top'>

Примеры

Граница при вертикальном тексте

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}

Результаты

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

Совместимость с браузерами

См. также

• Логические свойства и значения CSS
• Это свойство соответствует одному из физических свойств границы: border-top, border-right, border-bottom или border-left.
• writing-mode, direction, text-orientation