CSS border-block-end-color Property

Definition and Usage

The border-block-end-color property sets the color of an element’s logical block-end border. In the default horizontal writing mode, that is usually the bottom border color.

It maps to a physical side based on writing-mode. Color alone does not draw a line — you still need a visible style and width. For both block sides together, use border-block-color.

CSS Syntax

The initial value is currentColor. Pair it with border-block-end-style and border-block-end-width, or the border-block-end shorthand.

Property Values

How to Use border-block-end-color

Give the block-end border a style and width first, then set its color.

1. Draw the edge with border-block-end: 4px solid; or separate width and style longhands.
2. Set border-block-end-color to the color you want on that edge only.
3. Leave other edges alone, or color them with their own logical color properties.
4. Remember: without a style other than none, the color will not show.

Live Preview

The box already has a solid 4px block-end border. Change only border-block-end-color.

CSS Examples

Each snippet focuses on border-block-end-color. Style and width are only there so the color can show. Use Try It Yourself for a live editor.

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

<div>Blue block-end border</div>

<style>
  div {
    color: #7c3aed;
    border-block-end: 4px solid;
    border-block-end-color: currentColor;
    padding: 12px;
  }
</style>

<div>Border matches text color</div>

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

<div>Color follows writing mode</div>

Key Takeaways