CSS border-inline-color Property

CSS border-inline-color

The border-inline-color property in CSS specifies the color of an element’s inline-start and inline-end borders.

Syntax of border-inline-color

</>

Copy

border-inline-color: color | transparent | initial | inherit;

Values

Value	Description
`color`	Specifies the color of the inline-start and inline-end borders. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255,0,0,0.5)`).
`transparent`	Makes the inline-start and inline-end borders fully transparent.
`initial`	Sets the property to its default value (`currentColor`).
`inherit`	Inherits the value from its parent element.

Default Value

currentColor (inherits the current text color)

Examples for border-inline-color

Using the CSS border-inline-color Property

The following examples demonstrate how to use the border-inline-color property to set the color of the inline-start and inline-end borders.

</>

Copy

/* Set the inline-start and inline-end border color to blue */
.element {
  border-inline-color: blue;
}

/* Set different colors for inline-start and inline-end borders */
.element {
  border-inline-color: red green;
}

/* Make the inline borders transparent */
.element {
  border-inline-color: transparent;
}

/* Inherit the inline border color from the parent */
.element {
  border-inline-color: inherit;
}

Example for Different Inline Border Colors

Below is an example demonstrating how to use border-inline-color: red blue to set red for the inline-start border and green for the inline-end border:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline: 10px solid;
    border-inline-color: red blue;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Example for Inline Border Color

border-inline-color: blue;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline: 10px solid;
    border-inline-color: blue;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Browser Support

The border-inline-color property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	87.0
Edge	87.0
Firefox	66.0
Safari	14.1
Opera	73.0

TutorialKart

CSS border-inline-color Property