border-inline-end-style
Definition
The border-inline-end-style property is a CSS property that sets the style of an element's inline end border.
The inline end border is the border that is adjacent to the element's inline content (i.e., text and other inline elements) and is on the end side of the element, as determined by the element's writing mode and directionality. In horizontal writing modes, the end side is the right side, and in vertical writing modes, the end side is the top side.
Examples
Set the style of the inline end border for all p elements to a solid line
p {
border-inline-end-style: solid;
}
Set the style of the inline end border for all span elements to a dashed line
span {
border-inline-end-style: dashed;
}
Set the style of the inline end border for all div elements to a double line
div {
border-inline-end-style: double;
}
Set the style of the inline end border for all elements with the class "highlight" to a dotted line
.highlight {
border-inline-end-style: dotted;
}
Values
| Value | Description |
|---|---|
none | No border. This is the default value. |
hidden | Same as none, except in terms of border conflict resolution for table elements. |
Best Practices
- Use the border-inline-end-style property to set the style of an element's inline end border.
- Use one of the predefined values for the border-inline-end-style property, such as solid, dashed, dotted, or double, to specify the appearance of the inline end border.
- Use the none value to remove the inline end border from an element.
- Use the initial value to set the inline end border style to its default value.
- Use the inherit value to inherit the inline end border style from the parent element.
- Be aware that the border-inline-end-style property is part of the CSS Logical Properties and Values module, which is not yet widely supported in modern browsers. Instead, you can use the border-right-style property to set the style of the right border in horizontal writing modes, or the border-top-style property to set the style of the top border in vertical writing modes.
- Use the border-inline-end-style property in combination with other border properties, such as border-inline-end-color and border-inline-end-width, to create more complex inline end border styles.
- When using the border-inline-end-style property, make sure to test your inline end border styles on different screen sizes and resolutions to ensure that the border looks good on all devices.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| No | No | No | No | No | No |
The border-inline-end-style property is part of the CSS Logical Properties and Values module, which is not yet widely supported in modern browsers. As of January 2021, the property is not supported by any version of Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox, Apple Safari, or Opera.
Instead of using the border-inline-end-style property, you can use the border-right-style property to set the style of the right border in horizontal writing modes, or the border-top-style property to set the style of the top border in vertical writing modes. These properties are supported in all modern browsers.