CSS border-inline-start-color Property

Description

The border-inline-start-color CSS property is used to define the color of the inline start border of an element. The inline start border is the border on the side of the element that corresponds to the text direction, which is typically the left border in left-to-right languages like English and the right border in right-to-left languages like Arabic. This property allows web developers to specify the color of this specific border, giving them precise control over the visual appearance of borders in different text directions, which can be particularly useful for multilingual websites or complex layouts where text direction may change.

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

Interactive Demo

Example of the Border
Inline Start Color Property

Syntax

border-inline-start-color: <color>

Values

  • <color>Specifies the color of the border

Example

<div>This is a box with a border around it.</div>
div {
  background-color:#eee;
  color:#8b008b;
  padding:.75em;
  width:300px;
  height:100px;
  border-inline-start: 4px dashed;
  border-inline-start-color: blue;
}

Browser Support

The following table will show you the current browser support for the CSS border-inline-start-color property.

Desktop
Edge Chrome Firefox Opera Safari
7969415612.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
69414812.21069

Last updated by CSSPortal on: 1st January 2024