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