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;

Syntax

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

Values

• <border-style>Specifies the style of the border

Example

<div class="box">

  This is a box with a border.

</div>

.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;
}

Browser Support

The following table will show you the current browser support for the CSS border-block-end-style property.

Desktop
87	87	66	73	14.1

Tablets / Mobile
87	66	62	14.5	14	87

Last updated by CSSPortal on: 1st January 2024