border-inline-style

This property defines the line style of the inline borders of the element.

Which borders are considered to be inline depends on the element’s directionality, writing mode and text orientation.

Syntax

One of the following styles are accepted: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

/* Setting the style to be dashed */
border-inline-style: dashed;

Values

none
No border will be used, this is the default value.

hidden
Same effect as none with the exception that this value resolves some border-conflicts in tables.

dotted
The border will be a dotted line.

dashed
The border will be made of dashes.

solid
The border will be a solid line.

double
The border will be made of a double line.

groove
Specifies a “3D” groove border to be used.

ridge
Specifies a “3D” ridged border to be used.

inset
Specifies a “3D” inset border to be used.

outset
Specifies a “3D” outset border to be used.

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-style? Submit a codepen.io demo and we'll showcase it here ↴