CSS border-inline-end-style attribute

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

Definition and Usage

and attribute sets the border style at the end of the inline direction of the element.

CSS's and The attribute is associated with border-bottom-stylerelated CSS propertiesborder-left-stylerelated CSS propertiesborder-right-style , border-top-style The attributes are very similar, but and The attribute depends on the inline direction.

注意：Note: Example 2: Combined with the writing-mode attributerelated CSS propertiesand , Example 3: Combined with the direction attribute text-orientation and Defines the inline direction. This affects the start and end positions of a line, as well as

border-inline-end-style

The result of the attribute. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

direction
  div {
direction: rtl;

border-inline-end-style: dotted;

Example 1

To set the style for the inline direction end border: Example 2: Combined with the writing-mode attribute The position of the inline direction start and end borders is affected by

direction
  The position of the inline direction end border is affected by
  div {
direction: rtl;

border-inline-end-style: dotted;

writing-mode

writing-mode: vertical-rl; Example 3: Combined with the direction attribute The position of the inline direction start and end borders is affected by

direction
  Attribute impact:
  div {
direction: rtl;

border-inline-end-style: dotted;

}

Try it yourself

CSS syntax

border-inline-end-style: none\|hidden\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset\|initial\|inherit;	Attribute value
none	Value
Description	Default value. Specifies no border.
hidden	Same as none, but differs in border conflict resolution for table elements.
dashed	Specifies a dashed line border.
solid	Specifies a solid line border.
double	Specifies a double-line border.
groove	Specifies a 3D grooved border. The effect depends on the value of border-color.
ridge	Specifies a 3D raised border. The effect depends on the value of border-color.
inset	Specifies a 3D inset border. The effect depends on the value of border-color.
outset	Specifies a 3D protruding border. The effect depends on the value of border-color.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	none
Inheritance:	No
Animation creation:	Not supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderInlineEndStyle="dotted"