CSS border-block-start-width

The border-block-start-width property sets the width of the border at the start side of the block axis. In horizontal writing modes, that usually maps to the top border.

Syntax

border-block-start-width: thin;
border-block-start-width: medium;
border-block-start-width: thick;
border-block-start-width: 0.25rem;

Example

.panel {
  border-block-start-style: solid;
  border-block-start-color: #2563eb;
  border-block-start-width: 0.35rem;
  padding: 1rem;
}
Result:
A panel with a logical block-start border.

Why use logical borders?

Logical properties adapt to writing mode. That makes them useful for international layouts where "top", "right", "bottom" and "left" are not always the best mental model.

Related CSS topics