border-inline-end-width

Definition

border-inline-end-width is a CSS property that specifies the width of the border on the inline end of an element. It is used to set the width of the border along the end edge of an 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 width of the inline end border to a fixed length:

p {
  border-inline-end-width: 5px;
}

Set the width of the inline end border to a percentage value:

h1 {
  font-size: 32px;
  border-inline-end-width: 10%;
}

Set the width of the inline end border to a predefined value:

ul {
  border-inline-end-width: medium;
}

Use the border-inline-end-width property along with other border properties to specify the style and color of the border:

div {
  border-inline-end-width: 1px;
  border-inline-end-style: solid;
  border-inline-end-color: red;
}

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.
• Use the border-inline-end shorthand property: If you need to set multiple border properties for the inline end of an element (such as the width, style, and color), consider using the border-inline-end shorthand property. This will allow you to set all of these properties in a single rule, rather than having to specify them separately.
• 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.

Browser Compatibility

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