CSS border-inline-color Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-inline-color CSS property is used to set the color of the inline borders of an element, which are the borders that separate elements in inline direction, such as left and right borders for horizontally flowing text in languages like English. It allows web developers to specify a color for these specific borders, providing finer control over the visual appearance of text and inline elements within a container. This property is particularly useful in cases where you want to distinguish between different parts of text or inline elements within a larger block of content by giving their inline borders distinct colors.

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

Interactive Demo

border-inline-color: green;
writing-mode: horizontal-tb;

border-inline-color: #E1341E;
writing-mode: vertical-rl;

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

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

Example of the Border
Inline Color Property

Syntax

border-inline-color: <color>

Values

<color>Specifies the color of the border

Example

HTML

<div>This is a box with a border around it.</div>

CSS

div {
  background-color:#eee;
  color:#8b008b;
  padding:.75em;
  width:300px;
  height:100px;
  border-inline: 4px dashed;
  border-inline-color: purple;
}

Result

Editor