border-inline-color
Quick Summary for border-inline-color
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
<pre class="brush: css notranslate"><code><span class="token property">border-inline-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token property">border-inline-color</span><span class="token punctuation">:</span> #F5F6F7<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">border-inline-color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">border-inline-color</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">border-inline-color</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">border-inline-color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
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 value | currentcolor |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | computed color |
| Animation type | discrete |
Formal syntax
<'border-top-color'>{1,2}Examples
Border color with vertical text
HTML<div> <p class="exampleText">Example text</p> </div> div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } 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 languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
Apparently apple had to update the thumbnail of this video.
