CSS border-inline-color Property

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

Example of the Border
Inline Color Property

Syntax

border-inline-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: 4px dashed;
  border-inline-color: purple;
}

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 1st January 2024