border-inline

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.

Syntax

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;

Values

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.

Browser Compatibilty

Demos

Have a code example of border-inline? Submit a codepen.io demo and we'll showcase it here ↴