This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

border-inline can be used to set the values for one or more of border-inline-width, border-inline-style, and border-inline-color setting both the start and end in the inline dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation.

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

Initial valueas each of the properties of the shorthand:
Applies toall elements
Computed valueas each of the properties of the shorthand:
Animation typediscrete



The border-inline is specified with one or more of the following, in any order:

The width of the border. See border-width.
The line style of the border. See border-style.
The color of the border. See color.

Formal syntax

<'border-top-width'> || <'border-top-style'> || <'color'>

<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>



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


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

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


Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'border-inline' in that specification.
Editor's Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-inlineChrome Full support 69Edge Full support 79Firefox Full support 66IE No support NoOpera Full support 56Safari No support NoWebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 66Opera Android Full support 48Safari iOS No support NoSamsung Internet Android Full support 10.0


Full support  
Full support
No support  
No support

See also