This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Theborder-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
.
Value not found in DB!
The border-inline
is specified with one or more of the following, in any order:
<'border-width'>
border-width
.<'border-style'>
border-style
.<'color'>
color
.Syntax not found in DB!
<div> <p class="exampleText">Example text</p> </div>
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | No | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | No | No | No | No | No |
border-top
, border-right
, border-bottom
, or border-left
.writing-mode
, direction
, text-orientation
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline