CSS 'border-inline-style' Property Explained

The CSS 'border-inline-style' property specifies the style of the borders along the inline start and inline end sides of an element. It's a part of the CSS Logical Properties, designed to facilitate border styling that adapts based on the directionality of text flow within a document. This property ensures that the border style remains consistent and appropriate across various writing modes, including left-to-right (LTR), right-to-left (RTL), and vertical text orientations.

CSS 'border-inline-style' Property Examples

See the Pen CSS 'border-inline-style' Property by Webzstore (@webzstore) on CodePen.

The 'border-inline-style' property is key in creating adaptable, direction-aware designs. It ensures that web content maintains its intended stylistic appearance across various languages and scripts.

Browser Support For 'border-inline-style' Property

66.0	14.1	87.0	87.0	73.0

CSS Syntax of the 'border-inline-style' Property

border-inline-style: <line-style>{1,2};

/* <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset */
border-inline-style: dashed;          /* inline-start and inline-end both dashed */
border-inline-style: solid dotted;    /* inline-start solid, inline-end dotted */

• One value applies to both the inline-start and the inline-end border.
• Two values set the inline-start border first and the inline-end border second.

Usage of the 'border-inline-style' Property

Utilize 'border-inline-style' to define the line style of the borders at the inline-start and inline-end edges of an element, the edges where a line of text begins and ends. With writing-mode: horizontal-tb and direction: ltr (the default for English), these are the left and right borders, so the property maps to border-left-style and border-right-style; with direction: rtl the two swap. In vertical writing modes (vertical-rl or vertical-lr) with direction: ltr, the inline edges are the top and bottom borders. This is beneficial in responsive and internationalized designs, allowing borders to adjust to the writing mode and direction automatically. Unlock web design secrets with our comprehensive tutorials, from HTML basics to advanced CSS techniques.

Property Values of the 'border-inline-style' Property

• None: No border is displayed. This is the initial value, which is why a border does not appear until you set a style.
• Hidden: The border is not displayed, like none, but it takes priority over other styles when table cell borders conflict in the collapsed-border model (border-collapse: collapse).
• Dotted: The border appears as a series of dots.
• Dashed: The border is a series of short dashes.
• Solid: A solid, continuous line forms the border.
• Double: The border consists of two solid lines with a space between them.
• Groove: The border looks as if it were carved into the surface.
• Ridge: The border appears to protrude from the surface.
• Inset: The border makes the element look embedded into the page.
• Outset: The border gives the impression that the element stands out from the page.
• Initial: Resets the 'border-inline-style' to its default value (none).
• Inherit: Inherits the 'border-inline-style' from the parent element.