CSS border-block Property

Description

The border-block CSS property is a shorthand property used for setting the border properties of a block-level element in a writing mode-specific manner. It allows you to specify the border style, width, and color for the inline axis and block axis independently. This is particularly useful when working with writing modes other than the default horizontal left-to-right, such as vertical writing modes in scripts like Chinese or Japanese. By using border-block, you can create visually appealing and well-defined borders that adapt to the direction of the text, ensuring a consistent and readable layout across different writing modes. Individual properties are: border-block-width, border-block-style, border-block-color.

Initial value

See individual properties

Applies to

all elements

Inherited

no

Computed value

See individual properties

Animatable

See individual properties

JavaScript syntax

object.style.borderBlock

Interactive Demo

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

border-block: dashed blue;
writing-mode: vertical-rl;

border-block: 1rem solid purple;
writing-mode: horizontal-tb;
direction: rtl;

Syntax

border-block: <border-block-width> <border-block-style> <border-block-color>

Values

• <border-block-width>Specifies the width of the border
• <border-block-style>Specifies the style of the border
• <border-block-color>Specifies the color of the border

Example

<div class="box">

  This is a box with a border.

</div>

.box {
  border-block: 5px solid red;
  writing-mode: vertical-rl;
}

Browser Support

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