CSS 'border-inline-width' Property Explained

The CSS 'border-inline-width' property sets the width of the borders along the inline start and inline end sides of an element. As part of the CSS Logical Properties, it facilitates border width adjustments that respect the writing mode and directionality of the document, ensuring that border widths are applied consistently across languages and scripts.

CSS 'border-inline-width' Property Examples

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

The 'border-inline-width' property enhances the capability for creating flexible, direction-aware designs, ensuring elements maintain their intended stylistic appearance across various writing systems and layout directions.

Browser Support For 'border-inline-width' Property

66.0	14.1	87.0	87.0	73.0

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

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

/* <line-width> = <length> | thin | medium | thick */
border-inline-width: 5px;        /* inline-start and inline-end both 5px */
border-inline-width: 2px 8px;    /* inline-start 2px, inline-end 8px */

• 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.
• Remember that a border only appears if its style is not none, so pair this property with a border style.

Usage of the 'border-inline-width' Property

Use 'border-inline-width' to specify the thickness of the borders at the inline-start and inline-end edges of an element, that is, the edges where a line of text begins and ends. Which physical borders those are depends on writing-mode and direction: with writing-mode: horizontal-tb and direction: ltr (the default for English), inline-start is the left border and inline-end is the right border, so border-inline-width maps to border-left-width and border-right-width. With direction: rtl the two swap (inline-start is the right border). In vertical writing modes (vertical-rl or vertical-lr) with direction: ltr, the inline edges are the top and bottom borders. This makes the property useful for designs that must adapt to left-to-right, right-to-left, or vertical text.

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

• Thin: Applies a thin width to the inline borders (the exact thickness is browser-defined).
• Medium: Sets a medium thickness for the inline borders, the default value.
• Thick: Specifies a thick width for the inline borders.
• Length: Allows specifying the width with non-negative length units (e.g., px, em).
• Initial: Resets the 'border-inline-width' to its default value.
• Inherit: Inherits the 'border-inline-width' from the parent element.