CSS - border-inline-start

Example

<div>
  <p class="exampleText">Example text</p>
</div>

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-start: 5px dashed blue;
}

Syntax  

border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;

Values

One or more of the following, in any order:

<'border-width'>

See border-width

<'border-style'>

See border-style

<'color'>

See color

Formal syntax

<a href="css/border-width" title="&lt;br-width&gt;{1,4}"><'border-width'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/border-style" title="&lt;br-style&gt;{1,4}"><'border-style'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/color" title="&lt;color&gt;"><'color'></a><p>where <br><code><color> = <a href="css/border-inline-start#rgb()"><rgb()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-inline-start#rgba()"><rgba()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-inline-start#hsl()"><hsl()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-inline-start#hsla()"><hsla()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <hex-color> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-inline-start#named-color"><named-color></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> currentcolor <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/border-inline-start#deprecated-system-color"><deprecated-system-color></a></code></p><p>where <br><code><rgb()> = rgb( <a href="css/border-inline-start#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> )<br><rgba()> = rgba( <a href="css/border-inline-start#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> , <a href="css/border-inline-start#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/border-inline-start#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a> )<br><hsla()> = hsla( <a href="css/border-inline-start#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/border-inline-start#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ActiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> AppWorkspace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Background <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> CaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> GrayText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Highlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> HighlightText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoBackground <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Menu <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> MenuText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Scrollbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDDarkShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDLightShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Window <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowFrame <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowText</code></p><p>where <br><code><rgb-component> = <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><alpha-value> = <a href="css/number" title=""><number></a><br><hue> = <a href="css/number" title=""><number></a></code></p>

Description  

The border-inline-start CSS property is a shorthand property for setting the individual logical inline start border property values in a single place in the style sheet. border-inline-start can be used to set the values for one or more of: border-inline-start-width, border-inline-start-style, border-inline-start-color. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.

It relates to border-block-start, border-block-end, and border-inline-end, which define the other borders of the element.

Browser Compatibility  

[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled, then disabled by default.

See Also  

• The mapped physical properties: border-top, border-right, border-bottom, and border-left
• writing-mode, direction, text-orientation

License