CSS border-block-start-style Property

Definition and Usage

The border-block-start-style property sets the line style 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-style. In a vertical writing mode, the same declaration follows the block-start side instead of a fixed physical top. It applies to all elements and is not inherited. The initial value is none.

CSS Syntax

These are the same <line-style> keywords used by physical border styles. The initial value is none.

Property Values

ridge, inset, outset, and hidden are also valid line styles. hidden hides the border like none, but can behave differently in table border collapsing.

How to Use border-block-start-style

Pick a visible style, then give the line a width and a color so you can see it.

1. Set border-block-start-style to a keyword such as solid or dashed.
2. Set border-block-start-width to a size larger than 0.
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 the same width and color. Only border-block-start-style changes.

CSS Examples

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

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

<p>Block start</p>

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

<p>Block start</p>

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

<p>Block start</p>

Key Takeaways