border-inline-style

Definition

The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.

Examples

Apply a dashed border to the start and end sides of all h1 elements

h1 {
  border-inline-style: dashed;
}

Apply a double border to the start and end sides of all paragraphs with the class "warning"

p.warning {
  border-inline-style: double;
}

Apply a groove border to the start and end sides of all list items

li {
  border-inline-style: groove;
}

Values

Best Practices

• Use the border-inline-style property in conjunction with other border properties, such as border-inline-width and border-inline-color, to fully control the appearance of the border.
• Use the border-inline-style property in combination with other border-related properties, such as border-inline-start-style and border-inline-end-style, 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-style property with caution when working with text, as some border styles can be hard to read when applied to text. Instead, consider using a border style that has a clear, solid line, such as solid or double.

Browser Compatibility