CSS border-block-end-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-block-end-color CSS property sets the color of the border on the "end" edge of the block axis for an element. Because it is a logical property, its physical side depends on the element’s writing mode and block direction: in a horizontal top-to-bottom writing mode the block-end maps to the bottom edge, while in other writing-mode values it may map to a different physical edge. This makes border-block-end-color useful for styling components in a way that adapts to different writing directions without changing the authoring styles for each physical edge.

This property only controls color - it does not affect border width or style. The visible border still depends on the corresponding border style and width; if the border style is none or hidden the color has no visible effect. You can combine it with logical shorthands such as border-block-color or with the physical shorthand border-color to set multiple edge colors at once; note that shorthand declarations participate in the cascade and can override this property. Also be aware that some rendering techniques (for example when a border-image is used) can replace or obscure the plain border painting so the color may not be visible.

In the cascade, border-block-end-color behaves like other border color properties: it is not inherited by default and will be resolved according to normal specificity and origin rules. You can specify color values that reference the element’s current foreground via the keyword that takes the computed value from the color property, which is handy for keeping border and text colors consistent. For table elements using the collapsed border model, the actual painted color for an edge may be chosen by the conflict resolution algorithm rather than coming directly from this property.

Practically, use border-block-end-color when you need logical, writing-mode-aware control over one block-side’s border color - for example, theming an app UI that must work in both LTR and RTL languages or for components that rotate or change writing direction. When animating border appearance, remember the color can be transitioned independently of width and style, but the visual result will still depend on those other properties; if you set an element’s border-block-end-style to a visible style and change border-block-end-color over time, the stroke will update accordingly.

Definition

Initial value: currentcolor
Applies to: all elements
Inherited: no
Computed value: computed color
Animatable: by computed value type
JavaScript syntax: object.style.borderBlockEndColor

Interactive Demo

border-block-end-color: green;
writing-mode: horizontal-tb;

border-block-end-color: #E1341E;
writing-mode: vertical-rl;

border-block-end-color: rgb(106, 46, 203);
writing-mode: horizontal-tb;

border-block-end-color: hsl(197, 63%, 49%);
writing-mode: vertical-lr;

Example of the Border
Block End Color Property

Syntax

border-block-end-color: <color>

Values

<color>The color of the border.

Example

HTML

<div class="container">

  <div class="card">

    <strong>Horizontal writing mode</strong>

    <p>border-block-end-color: crimson;</p>

  </div>



  <div class="card vertical">

    <strong>Vertical writing mode</strong>

    <p>border-block-end-color: seagreen;</p>

  </div>

</div>

CSS

/* Reset & base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f6f7fb;
  color: #222;
  padding: 24px;
}

.container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Card with a noticeable end border color */
.card {
  width: 260px;
  padding: 16px;
  border: 6px solid #e2e6ef; /* base border color */
  border-block-end-color: crimson; /* overrides block-end border color */
  border-radius: 8px;
  background: linear-gradient(#fff, #fbfdff);
  box-shadow: 0 6px 18px rgba(20, 30, 60, 0.08);
}

.card strong {
  display: block;
  margin-bottom: 8px;
}

/* Vertical writing-mode: block-end maps to a different physical side */
.card.vertical {
    writing-mode: vertical-rl;
    height: 300px; 
    width: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-block-end-color: seagreen; 
  }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-block-end-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.