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

border-inline-start-style

Definition

The border-inline-start-style CSS property defines the style of the logical inline start border 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, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

Examples

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

h1 {
  border-inline-start-style: dashed;
}

Apply a double border to the start side of all paragraphs with the class "warning"

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

Apply a groove border to the start side of all list items

li {
  border-inline-start-style: groove;
}

Values

ValueDescription
noneNo border is applied.
hiddenThe border is hidden (same as none), but it still takes up space in the layout.
dottedThe border is a series of dots.
dashedThe border is a series of short lines.
solidThe border is a solid line.
doubleThe border is two solid lines. The width of the border is the sum of the two lines and the space between them.
grooveThe border looks like it is carved into the page.
ridgeThe border looks like it is coming out of the page.
insetThe border looks like it is embedded in the page.
outsetThe border looks like it is coming out of the page.

Best Practices

  • Use the border-inline-start-style property in conjunction with other border properties, such as border-inline-start-width and border-inline-start-color, to fully control the appearance of the border.
  • Use the border-inline-start-style property in combination with other border-related properties, such as border-inline-end-style, border-block-start-style, and border-block-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.
  • Avoid using too many different border styles on a single page, as this can be visually overwhelming. Instead, choose one or two styles that you use consistently throughout the design.
  • Use the border-inline-start-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 Comaptibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes