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

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

Попробуйте

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

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

border-block: 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-block-color
• border-block-style
• border-block-width

Синтаксис

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

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

Значения

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

<line-width>

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

<line-style>

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

color

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

Описание

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

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

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

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

border-block = 
  <'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-block: 5px dashed blue;
}

Результат

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

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

См. также

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