CSS border-block-end-width Property

Definition and Usage

The border-block-end-width property sets the thickness of the logical block-end border. It maps to a physical edge based on writing-mode, direction, and text-orientation.

In the default horizontal writing mode, block-end is usually the bottom edge, so this property acts like border-bottom-width. You still need a visible border-block-end-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-end-width

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

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

Live Preview

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

CSS Examples

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

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

<p>Block end</p>

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

<p>Block end</p>

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

<p>Block end</p>

Key Takeaways