This property is a shorthand that sets the inline border properties.
Which borders are considered inline depends on the element’s directionality, writing mode and text orientation.
This shorthand sets the border-inline-color
, border-inline-style
and border-inline-width
properties.
/* Setting values can be done in any order
and any value can be omitted: */
border-inline: 1px solid blue;
border-inline: #fafa33 dotted 3px;
border-inline: dashed;
border-width
Same values apply as with the border-width
property. It can be thin
, medium
or thick
as a keyword value or any type of length value (example: 15px
or 1.3rem
).
border-style
Same values apply as with the border-style
property. It specifies the type of style for the line used for the inline borders. It can be solid
, none
, dotted
, dashed
, double
, inset
, hidden
, groove
, ridge
or outset
color
As with other types of color properties, any color type value is accepted.
initial
Global CSS keyword – this sets the property to the default value.
inherit
Global CSS keyword – this sets the property to be inherited from its parent element.
Have a code example of border-inline
? Submit a codepen.io demo and we'll showcase it here ↴