CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border-inline-end-color

The border-inline-end-color property is used to set the color of the inline end border of an element. It is a part of the CSS Border module Level 3 and is supported by most modern web browsers.

The inline end border is the border that appears at the end of an inline element, which is the right side for left-to-right languages like English and the left side for right-to-left languages like Arabic.

The border-inline-end-color property can be used with the border-inline-end-style and border-inline-end-width properties to fully customize the inline end border of an element.

Syntax

The syntax for the border-inline-end-color property is as follows:

border-inline-end-color: color|transparent|initial|inherit;

The property value can be specified using any valid CSS color value, such as a color name, RGB value, or hexadecimal value. The value can also be set to transparent to make the border invisible, initial to set the property to its default value, or inherit to inherit the property value from the parent element.

Examples

Here are some examples of how to use the border-inline-end-color property in CSS:

/* Set the inline end border color to red */
p {
  border-inline-end-color: red;
}

/* Set the inline end border color to a hexadecimal value */
p {
  border-inline-end-color: #ff0000;
}

/* Set the inline end border color to inherit from the parent element */
p {
  border-inline-end-color: inherit;
}

/* Set the inline end border color to transparent */
p {
  border-inline-end-color: transparent;
}

In the above examples, the border-inline-end-color property is used to set the color of the inline end border of a <p> element. The first example sets the color to red, the second example sets the color to a hexadecimal value, the third example sets the color to inherit from the parent element, and the fourth example sets the color to transparent.

Browser Support

The border-inline-end-color property is supported by most modern web browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera. However, it may not be supported by older browsers, such as Internet Explorer.

Conclusion

The border-inline-end-color property is a useful CSS property that allows you to set the color of the inline end border of an element. It can be used in combination with other border properties to fully customize the appearance of an element's border. With its wide browser support, it is a reliable tool for web developers to use in their projects.

References

Activity