The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.
Apply a thin border to the start and end sides of all h1 elements
Apply a 10% thick border to the start and end sides of all paragraphs with the class "warning"
Apply a 3pt thick border to the start and end sides of all list items
A specific length value, such as 10px
, or 5pt
A thin border. Equivalent to 1px
A medium border. Equivalent to 3px
A thick border. Equivalent to 5px
Use the border-inline-width property in conjunction with other border properties, such as border-inline-style and border-inline-color, to fully control the appearance of the border.
Use the border-inline-width property in combination with other border-related properties, such as border-inline-start-width and border-inline-end-width, to create more complex border layouts.
Be mindful of the contrast between the border color and the background color of the element. If the contrast is too low, the border may be difficult to see, especially if the border is thin.
Avoid using excessively thick borders, as they can be visually overwhelming and make it harder to read the content of the element.
Use the border-inline-width property with caution when working with text, as some border widths can be hard to read when applied to text. Instead, consider using a medium or thin border width.