border-inline-end

Definition

border-inline-end is a CSS shorthand property that is used to set the style, width, and color of the border on the inline end of an element. The inline end of an element is the end of the element that is in the inline direction, meaning that it is aligned with the start-to-end direction of the text and flows horizontally in a left-to-right direction.

Examples

Set the style, width, and color of the inline end border:

p {
  border-inline-end: dotted 2px blue;
}

Use the border-inline-end property along with the border-inline-start property to specify the border style for both the inline start and end of an element:

h1 {
  border-inline-start: solid 3px green;
  border-inline-end: solid 3px green;
}

Use the border-inline-end property along with the border-top, border-right, border-bottom, and border-left properties to specify the border style for all four sides of an element:

div {
  border-top: solid 4px red;
  border-right: solid 4px red;
  border-bottom: solid 4px red;
  border-left: solid 4px red;
  border-inline-end: solid 4px red;
}

Use the border-inline-end property along with the border shorthand property to set the border style for all four sides and the inline end of an element:

ul {
  border: solid 5px black;
  border-inline-end: solid 5px black;
}

Values

Best Practices

• Use a responsive length value: If you want the border width to be responsive to changes in the size of the viewport, consider using a length value that is based on em or rem units instead of px. This will ensure that the border width scales up or down with the size of the text.
• Avoid using thick and thin: While the predefined values thick and thin can be convenient, they can also be somewhat unpredictable, as the actual thickness of these values may vary across different browsers and devices. Instead, consider using a fixed length value or a percentage value to ensure more consistent results.
• Test your border styles: Be sure to test your border styles on different devices and browsers to ensure that they are being displayed as intended. Some browsers may have different default values for border properties, which could affect the appearance of your borders.
• Consider using a CSS reset: If you are working on a project with multiple developers, it can be helpful to use a CSS reset to ensure that all of the default styles are consistent across different browsers. This can help to prevent unexpected behaviors when setting border styles.
• Use the border-inline-end property along with the border-inline-start, border-top, border-right, border-bottom, and border-left properties to specify the border style for all sides of an element

Browser Compatibility

The border-inline-end property is an experimental feature and is not yet a part of any official CSS specification. As a result, support for this property may be limited or inconsistent across different browsers.