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

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