1. css
  2. /properties
  3. /border-inline-start-color

border-inline-start-color

Definition

The border-inline-start-color CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

The border-inline-start-color property is used in conjunction with other border properties, such as border-inline-start-style and border-inline-start-width, to specify the appearance of the element's start border.

Examples

Applying a solid red border on the start side of a paragraph element:

p {
  border-inline-start-color: red;
  border-inline-start-style: solid;
  border-inline-start-width: 3px;
}

Applying a dashed green border on the start side of a heading element:

h1 {
  border-inline-start-color: green;
  border-inline-start-style: dashed;
  border-inline-start-width: 2px;
}

Applying a dotted purple border on the start side of a list item element:

li {
  border-inline-start-color: purple;
  border-inline-start-style: dotted;
  border-inline-start-width: 1px;
}

Applying a double orange border on the start side of a div element:

div {
  border-inline-start-color: orange;
  border-inline-start-style: double;
  border-inline-start-width: 4px;
}

Values

ValueDescription
<color>Specifies the color of the border using a named color, a hexadecimal value, a RGB value, or a HSL value.
transparentMakes the border transparent. This is default value if border-inline-start-color is not specified.
currentcolorUses the value of the color property of the element as the border color.
inheritInherits the value of the border-inline-start-color property from the parent element. If the border-inline-start-color property is not specified on the parent element, then it will default to transparent.

Best Practices

  • Use the border shorthand property instead of the individual border properties whenever possible, as it is more concise and easier to read.
  • Make sure to set the border-inline-start-style and border-inline-start-width properties in addition to the border-inline-start-color property, as the border will not be visible without these.
  • Use a valid color value, such as a named color (e.g. "red"), a hexadecimal value (e.g. "#ff0000"), or a RGB/RGBA value (e.g. "rgb(255, 0, 0)" or "rgba(255, 0, 0, 1)").
  • Use the currentcolor value to use the current color of the element as the border color.
  • Consider the contrast ratio between the border color and the background color to ensure that the border is easily visible and meets accessibility standards.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesNoNoNoYes