border-inline-color
Quick Summary for border-inline-color
The border-inline-color CSS property defines the color of the logical inline borders 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 and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.
Code Usage for border-inline-color
border-inline-color: yellow; border-inline-color: #F5F6F7;  /* Global values */ border-inline-color: inherit; border-inline-color: initial; border-inline-color: revert; border-inline-color: unset; 
More Details for border-inline-color

border-inline-color

The border-inline-color CSS property defines the color of the logical inline borders 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 and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

The border color in the other dimension can be set with border-block-color which sets border-block-start-color, and border-block-end-color.

Syntax

border-inline-color: yellow; border-inline-color: #F5F6F7;  /* Global values */ border-inline-color: inherit; border-inline-color: initial; border-inline-color: revert; border-inline-color: unset; 

Values

<'color'>

The color of the border. See color.

Formal definition

Initial valuecurrentcolor
Applies toall elements
Inheritedno
Computed valuecomputed color
Animation typediscrete

Formal syntax

<'border-top-color'>{1,2}

Examples

Border color with vertical text

HTML
<div>   <p class="exampleText">Example text</p> </div> 
CSS
div {   background-color: yellow;   width: 120px;   height: 120px; }  .exampleText {   writing-mode: vertical-lr;   border: 10px solid blue;   border-inline-color: red; } 
Results

Specifications

Specification
CSS Logical Properties and Values Level 1 # propdef-border-inline-color

See also

This property maps to the physical border properties: border-top-color, border-right-color, border-bottom-color, or border-left-color. writing-mode, direction, text-orientation+ bug 1297097

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Many of life's failures are people who did not realize how close they were to success when they gave up.
Thomas A. Edison
Random CSS Property

Pseudo-elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
Pseudo-elements css reference