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

Example of the
Border Block Property

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
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 1st January 2024