CSS border-block-style Property

Description

The border-block-style CSS property is used to define the style of the border along the "block" axis of an element, which is typically the vertical axis in most writing modes, including horizontal-tb (default) and vertical-rl. This property allows you to specify the visual appearance of the top and bottom borders (or the left and right borders in vertical-rl mode) separately from the inline-axis borders using the border-inline-style property. You can set various border styles, such as solid, dashed, dotted, or double, to create different visual effects for the block-level borders of an element. It provides greater flexibility in designing the layout and appearance of web content, particularly when working with non-standard text directions or complex page layouts.

Initial value

none

Applies to

all elements

Inherited

no

Computed value

as specified

Animatable

discrete

JavaScript syntax

object.style.borderBlockStyle

Interactive Demo

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

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

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

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

Syntax

border-block-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-width: 5px;
  border-block-color: green;
  border-block-style: dashed;
  writing-mode: vertical-rl;
}

Browser Support

The following table will show you the current browser support for the CSS border-block-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