The border-inline-start-width CSS property defines the width of the logical inline-start border 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, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.
Apply a 1em thick border to the start side of all h1 elements
Apply a 10% thick border to the start side of all paragraphs with the class "warning"
Apply a 3pt thick border to the start side of all list items
|Thin border. Equivalent to
1px on most screens.
|Medium border. Equivalent to
3px on most screens.
|Thick border. Equivalent to
5px on most screens.
|A specific length value, such as
|A percentage value, representing a percentage of the element's font size.
- Use the border-inline-start-width property in conjunction with other border properties, such as border-inline-start-style and border-inline-start-color, to fully control the appearance of the border.
- Use the border-inline-start-width property in combination with other border-related properties, such as border-inline-end-width, border-block-start-width, and border-block-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-start-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 border width that is medium or thin.