border-inline

Definition

border-inline is a CSS shorthand property that sets the width, style, and color of the border on the start and end sides of an element. The start and end sides are the sides that start and end at the beginning and end of the element's inline-axis.

Examples

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

h1 {
  border-inline: thin dashed green;
}

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

p.warning {
  border-inline: medium solid orange;
}

Apply a thick double purple border to the start and end sides of all list items

li {
  border-inline: thick double purple;
}

Values

Best Practices

• Use the border-inline property to set all three border properties (width, style, and color) in a single declaration, making your CSS more concise and easier to read.
• Use the border-inline property in combination with other border-related properties, such as border-inline-start and border-inline-end, 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 property with caution when working with text, as some border styles and widths 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, and a medium or thin border width.

Browser Compatibility