CSS border-block-start-width Property

Definition and Usage

The border-block-start-width property sets the thickness of the logical block-start border. It maps to a physical edge based 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-width. You still need a visible border-block-start-style or the line will not show. It applies to all elements and is not inherited. The initial value is medium.

CSS Syntax

Use a keyword or a non-negative <line-width> length such as 8px. The initial value is medium. Negative lengths are invalid.

Property Values

How to Use border-block-start-width

Set a visible style first, then choose how thick the block-start line should be.

1. Set border-block-start-style to something visible, such as solid.
2. Set border-block-start-width to a keyword or a length.
3. Set border-block-start-color so the line contrasts with the background.
4. Or use the border-block-start shorthand for width, style, and color in one line.

Live Preview

The box keeps a solid blue style. Only border-block-start-width changes.

CSS Examples

Each snippet shows only what you need for the block-start width: a thickness, a visible style, and a color. Use Try It Yourself for a live editor.

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

<p>Block start</p>

<style>
  p {
    border-block-start-width: thick;
    border-block-start-style: solid;
    border-block-start-color: blue;
  }
</style>

<p>Block start</p>

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

<p>Block start</p>

Key Takeaways