border-inline-start

This is a shorthand property that sets the inline start border’s property values.

Which border is considered the inline start border depends on the element’s writing mode, directionality and text orientation.

Syntax

A shorthand that sets the values for the border-inline-start-color, border-inline-start-style, border-inline-start-width properties. The values can be specified in any order.

/* Values can be specified in any order and can be omitted: */
border-inline-start: 3px solid lightblue;
border-inline-start: dashed;
border-inline-start: grey 5px dotted;

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