1. css
  2. /properties
  3. /border-inline-start

border-inline-start

Definition

border-inline-start is a shorthand property for setting the width, style, and color of the border on the start side of an element, where the start side is the side that starts at the beginning of the element's inline-axis.

Examples

Apply a 2px dashed black border to the start side of all h1 elements

h1 {
  border-inline-start: 2px dashed black;
}

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

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

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

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

Values

ValueDescription
<border-width>The width of the border. Can be a specific length value, such as 10px, 2em, or 5pt, or one of the predefined values thin, medium, or thick.
<border-style>The style of the border. Can be one of the following: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset.
<border-color>The color of the border. Can be a specific color value, such as red or #00ff00, or a predefined color keyword, such as black or transparent.

Best Practices

  • Use the border-inline-start property to set the width, style, and color of the border on the start side of an element in a single declaration, rather than setting each property individually. This can make your CSS more concise and easier to read.
  • Use the border-inline-start property in combination with other border-related properties, such as border-inline-end, border-block-start, and border-block-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-start 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 width.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes