CSS border-block-width Property

Description

The border-block-width CSS property is used to set the width of the borders on the block-axis (the main content direction) of an element in a block-level context. This property is particularly useful in languages or layouts that involve vertical text flow, such as those using writing modes like "vertical-rl" or "vertical-lr." By specifying the border-block-width, you can control the thickness of borders on the block axis independently of the inline axis (the horizontal direction). It provides more control over the appearance of borders in complex text layouts and vertical writing modes, allowing for precise styling of elements in such contexts.

Initial value

medium

Applies to

all elements

Inherited

no

Computed value

absolute length; 0 if the border style is none or hidden

Animatable

by computed value type

JavaScript syntax

object.style.borderBlockWidth

Interactive Demo

border-block-width: 5px;
writing-mode: horizontal-tb;

border-block-width: 1rem;
writing-mode: vertical-rl;

border-block-width: thin;
writing-mode: horizontal-tb;

border-block-width: thick;
writing-mode: vertical-lr;

Syntax

border-block-width: <border-width>

Values

• <border-width>Specifies the width 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-width: 5px;
  writing-mode: vertical-rl;
}

Browser Support

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