CSS border-block-start Property

Definition and Usage

The border-block-start property is a shorthand for the logical block-start border. In one declaration it can set border-block-start-width, border-block-start-style, and border-block-start-color.

The physical edge depends on writing-mode, direction, and text-orientation. In the default horizontal writing mode, block-start is usually the top edge, so this property acts like border-top. It applies to all elements and is not inherited.

CSS Syntax

Write width, style, and color in any order. You can omit parts. Missing style stays none, so the border stays hidden until a visible style is set.

Property Values

How to Use border-block-start

Put width, style, and color in one line on the block-start edge.

1. Choose a visible style such as solid or dashed.
2. Add a width such as 4px or thick.
3. Add a color that contrasts with the background.
4. Write them together: border-block-start: 4px solid blue;

Live Preview

Only border-block-start changes. In horizontal writing, block-start is usually the top edge.

CSS Examples

Each snippet uses only the shorthand. No extra layout CSS. Use Try It Yourself for a live editor.

<style>
  p {
    border-block-start: 4px solid blue;
  }
</style>

<p>Block start</p>

<style>
  p {
    border-block-start: 4px dashed blue;
  }
</style>

<p>Block start</p>

<style>
  p {
    writing-mode: vertical-rl;
    border-block-start: 8px solid blue;
  }
</style>

<p>Block start</p>

Key Takeaways