CSS border-block-end-color Property

What You’ll Learn

The border-block-end-color property sets the color of the block-end border on an element. In horizontal writing, that usually means the bottom border color.

Definition and Usage

The border-block-end-color CSS property sets the color of an element’s block-end border. In languages written top to bottom, such as English, block-end usually corresponds to the bottom edge of the element.

This property is part of CSS logical properties, which let you control layout and borders in a way that adapts to different writing modes such as right-to-left or vertical text.

📝 Syntax

The syntax for border-block-end-color is simple and works like other border color properties:

selector {
  border-block-end-color: <color>;
}

Basic Example

div {
  border-block-end-style: solid;
  border-block-end-width: 4px;
  border-block-end-color: red;
}

The color value can be a named color, hexadecimal value, RGB, HSL, or any other valid CSS color.

Syntax Rules

• This property affects only the block-end border color.
• It does not set width or style by itself.
• Use with border-block-end-width and border-block-end-style for full control.
• Alternatively, use border-block-end: 4px solid red; as shorthand.
• The color follows writing mode and stays on the logical block-end edge.

Default Value

The default value of border-block-end-color is currentColor. That means the block-end border uses the element’s text color value unless you override it.

💎 Property Values

border-block-end-color accepts any valid CSS color value.

Works With Other Longhands

Block-End Color and Writing Modes

The block-end edge follows the block axis, so the same color rule adapts when writing mode changes.

border-block-end-color vs border-bottom-color

Examples Gallery

Try border-block-end-color with red borders, hex values, currentColor, and vertical writing mode.

<style>
  div {
    border-block-end-style: solid;
    border-block-end-width: 4px;
    border-block-end-color: red;
    padding-block-end: 0.75rem;
  }
</style>

<div>This div has a red block-end border.</div>

.footer-rule {
  border-block-end: 2px solid #2563eb;
  border-block-end-color: #2563eb;
  padding-block-end: 1rem;
}

.quote {
  color: #059669;
  border-block-end-style: solid;
  border-block-end-width: 2px;
  border-block-end-color: currentColor;
}

.vertical-panel {
  writing-mode: vertical-rl;
  border-block-end-style: solid;
  border-block-end-width: 3px;
  border-block-end-color: #7c3aed;
  padding: 1rem;
}

💡 Best Practices