CSS border-block-end-style Property

Description

The border-block-end-style CSS property is used to define the style of the border on the block-end side of an element, which depends on the writing mode (horizontal or vertical) and the direction (e.g., left or right in horizontal mode, or top or bottom in vertical mode). This property allows you to specify various border styles, such as solid, dashed, dotted, or double, to customize the appearance of the block-end border, providing greater control over the visual design of an element's layout, especially in complex text layouts or when working with non-standard writing modes.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.borderBlockEndStyle

Interactive Demo

border-block-end-style: solid;
writing-mode: horizontal-tb;

border-block-end-style: dotted;
writing-mode: vertical-rl;

border-block-end-style: dashed;
writing-mode: horizontal-tb;

border-block-end-style: double;
writing-mode: vertical-lr;

Example of the Border
Block End Style Property

Syntax

border-block-end-style: <border-style>

Values

<border-style>Specifies the style of the border

Example

HTML

<div class="box">

  This is a box with a border.

</div>

CSS

.box {
  border-block: 5px dashed;
  border-block-color: green;
  border-block-end-width: 5px;
  border-block-end-color: red;
  border-block-end-style: dashed;
  writing-mode: vertical-rl;
}

Result

Editor