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
| Value | Description |
|---|---|
| none | No border is applied. |
| hidden | The border is hidden (same as none), but it still takes up space in the layout. |
| dotted | The border is a series of dots. |
| dashed | The border is a series of short lines. |
| solid | The border is a solid line. |
| double | The border is two solid lines. The width of the border is the sum of the two lines and the space between them. |
| groove | The border looks like it is carved into the page. |
| ridge | The border looks like it is coming out of the page. |
| inset | The border looks like it is embedded in the page. |
| outset | The 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |