CSS border-block-start-color Property
Description
The border-block-start-color property defines the color used to paint the border on the “block start” side of an element - that is, the edge that starts the block axis in the element’s writing mode. Because it’s a logical property, the physical side it targets (top, right, bottom, left) can change depending on the element’s writing-mode, direction, and block flow. Using this property lets you style the leading block edge consistently across different writing directions without having to pick a physical edge.
The color set by border-block-start-color only becomes visible when the corresponding border has a non-zero width and a style that paints (for example, a style other than ‘none’). In practice this means the property is typically used together with the matching style and width properties; for example, the visibility of the color depends on border-block-start-style and border-block-start-width. If those properties result in a border that does not render, the color value is present in the computed style but has no visual effect.
In the cascade, border-block-start-color participates as an individual longhand; it can be set directly or be established by broader shorthands. Shorthand properties that can supply or override the same effective color include the logical shorthand border-block-color and the traditional physical shorthand border-color. As with other CSS properties, specificity, order, and importance determine which declaration wins. Note also that border color properties are not inherited by default, so child elements do not automatically take this color unless explicitly set or derived via a cascade rule.
From a practical standpoint, prefer these logical border color properties when building interfaces that must adapt to different languages and writing directions: they reduce the need for conditional rules that remap top/left/right/bottom for different locales. They’re also useful when you want to change a single edge’s color independently of the others while keeping the rest of the border styling consistent.
Definition
- Initial value
- currentcolor
- Applies to
- all elements
- Inherited
- no
- Computed value
- computed color
- Animatable
- by computed value type
- JavaScript syntax
- object.style.borderBlockStartColor
Interactive Demo
Block Start Color Property
Syntax
border-block-start-color: <color>
Values
- <color>The color of the border.
Example
Browser Support
The following information will show you the current browser support for the CSS border-block-start-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
