CSS border-block Property

What You’ll Learn

The border-block property is a logical CSS shorthand for styling the block-start and block-end borders of an element. In normal horizontal English layouts, that usually means the top and bottom borders.

Definition and Usage

The border-block CSS property is a shorthand for setting border width, border style, and border color on the block-start and block-end sides of an element. In a typical English layout, block-start is the top edge and block-end is the bottom edge.

In vertical writing modes or other languages with different writing directions, those physical positions can change. border-block adapts automatically, which makes it useful for responsive and international layouts.

📝 Syntax

The border-block shorthand sets width, style, and color on both block sides:

selector {
  border-block: <border-width> <border-style> <border-color>;
}

Basic Example

div {
  border-block: 4px solid blue;
}

Syntax Rules

• One value applies the same border to both block-start and block-end.
• border-block-width, border-block-style, and border-block-color each accept one or two values for start and end.
• Use border-block-start and border-block-end when each side needs a different full border.
• Values follow the usual border order: width, style, then color.
• Related properties include border-block-start, border-block-end, and border-inline.
• A border only appears when the style is not none.

Default Value

The default value for border-block is:

border-block: medium none currentColor;

That means the border width is medium, the style is none (invisible), and the color is currentColor, which matches the element’s text color.

💎 Property Values

The border-block shorthand accepts the same value types as the regular border property.

One Value vs Two Values

• One value — Applies the same border to both block-start and block-end.
• Two values on longhands — On border-block-width, border-block-style, or border-block-color, the first value applies to block-start and the second to block-end.
• Side shorthands — Use border-block-start and border-block-end for fully different borders on each side.

Block Borders and Writing Modes

border-block targets the sides along the block axis, so the same rule behaves correctly in different writing modes.

border-block vs border-top / border-bottom

Examples Gallery

Try border-block with matching borders, split start/end values, section dividers, and vertical writing mode.

<style>
  div {
    border-block: 4px solid blue;
    padding: 1rem;
  }
</style>

<div>
  This element has a blue border on the block-start and block-end sides.
</div>

.panel {
  border-block-start: 3px solid #2563eb;
  border-block-end: 1px solid #cbd5e1;
  padding: 1rem;
}

.section {
  border-block: 2px solid #059669;
  padding-block: 1.25rem;
  background: #ecfdf5;
}

.vertical-panel {
  writing-mode: vertical-rl;
  border-block: 3px solid #7c3aed;
  padding: 1rem;
}

💡 Best Practices