CSS border-block-end-style egenskab

Forrige side border-block-end-color
Næste side border-block-end-width

Definition og brug

border-block-end-style egenskaber bruges til at indstille kantstilen for elementer i blokretningen.

CSS border-block-end-style egenskab med border-bottom-style、border-left-style、border-right-style og border-top-style The attributes are very similar, but border-block-end-style The attribute depends on the block direction.

Note:related CSS properties writing-mode Defines the block direction. This affects the starting and ending positions of the block and border-block-end-style Attribute result. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Set the style for the block direction end border:

div {
  border-block-end-style: dotted;
}

Try it yourself

Example 2: Combined with the writing-mode attribute

The position of the block direction end border style is affected by writing-mode Attribute impact:

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-width: 5px;
}

Try it yourself

CSS syntax

border-block-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Attribute value

Value	Description
none	Default value. Specifies no border.
hidden	Same as "none", but different in border conflict resolution for table elements.
dotted	Specifies a dotted line border.
dashed	Specifies a dashed line border.
solid	Specifies a solid line border.
double	Specifies a double-line border.
groove	Specifies a 3D groove border. The effect depends on the value of border-color.
ridge	Specifies a 3D bevel 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 outset 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.