CSS border-inline-end Attribute

Previous Page border-inline-color
Next Page border-inline-end-color

Definition and usage

border-inline-end The property is a shorthand for the following properties:

border-inline-end-width(inline end border width)
border-inline-end-style(inline end border style)
border-inline-end-color(inline end border color)

CSS border-inline-end The property is a shorthand for the following properties: border-bottom、border-left、border-right and border-top The properties are very similar, but border-inline-end The property depends on the inline direction.

Note:Relevant CSS properties writing-mode、text-orientation and direction Defines the inline direction. This affects the start and end positions of a line, as well as border-inline-end The result of the property. For English pages, the inline direction is from left to right, and the block direction is from top to bottom.

Instance

Example 1

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

div {
  border-inline-end: 10px solid pink;
}

Try it yourself

Example 2: Combined with the writing-mode property

The position of the border at the end of the inline direction is affected by writing-mode Property influence:

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

Try it yourself

Example 3: Combined with the direction property

The position of the border at the end of the inline direction is affected by direction Property influence:

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

Try it yourself

CSS syntax

border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color|initial|inherit;

Property value

Value	Description
border-inline-end-width	Specifies the border width at the end of the inline direction for the element. The default value is "medium".
border-inline-end-style	Specifies the border style at the end of the inline direction for the element. The default value is "none".
border-inline-end-color	Specifies the border color at the end of the inline direction for the element. The default value is the current border color.

Value

Description

border-inline-end-width

Specifies the border width at the end of the inline direction for the element.

The default value is "medium".

border-inline-end-style

Specifies the border style at the end of the inline direction for the element.

The default value is "none".

border-inline-end-color

Specifies the border color at the end of the inline direction for the element.

The default value is the current border color.

Technical details

initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.
Default value:	medium none currentcolor
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderInlineEnd="pink dotted 5px"