border-inline-start-width

Definition

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.

Examples

Apply a 1em thick border to the start side of all h1 elements

h1 {
  border-inline-start-width: 1em;
}

Apply a 10% thick border to the start side of all paragraphs with the class "warning"

p.warning {
  border-inline-start-width: 10%;
}

Apply a 3pt thick border to the start side of all list items

li {
  border-inline-start-width: 3pt;
}

Values

Best Practices

• 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.

Browser Compatibility