CSS border-block Property

Definition and Usage

The border-block property is a logical shorthand that sets border-block-width, border-block-style, and border-block-color on both the block-start and block-end sides at once.

In the default horizontal writing mode, that means top and bottom. Change writing-mode, and the same rule can map to the left and right edges instead. For the other axis, use border-inline.

CSS Syntax

Same value shape as border, but only for the block axis. One declaration styles both block sides the same way.

Property Values

How to Use border-block

Think in block start and end, not only top and bottom.

1. Decide you want matching borders on the block axis (usually top and bottom in English layouts).
2. Set a style such as solid or dashed. Without a style, nothing draws.
3. Add width and color as needed: border-block: 4px solid #2563eb;.
4. If start and end must differ, switch to border-block-start and border-block-end.

Live Preview

Change border-block and the writing mode. Watch which physical edges pick up the border.

CSS Examples

Each snippet focuses on border-block. Use Try It Yourself for a live editor.

<style>
  div {
    border-block: 4px solid #2563eb;
    padding: 12px;
  }
</style>

<div>Top and bottom borders</div>

<style>
  div {
    border-block: 3px dashed #dc2626;
    padding: 12px;
  }
</style>

<div>Dashed block sides</div>

<style>
  div {
    writing-mode: vertical-rl;
    border-block: 4px solid #0f766e;
    padding: 12px;
  }
</style>

<div>Block sides follow writing mode</div>

Key Takeaways