CSS border-block-start Property

Description

The border-block-start CSS property is used to set the style, width, and color of the border on the start edge of a block-level element. The "start" edge depends on the text direction; for left-to-right scripts like English, it's equivalent to the left edge, while for right-to-left scripts like Arabic, it's the right edge. This property is especially useful in multilingual layouts where text flows in different directions, allowing for precise control over the borders of elements regardless of their orientation. It helps ensure a consistent and visually appealing design across various language scripts and reading directions. Individual properties are: border-block-start-width, border-block-start-style, border-block-start-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.borderBlockStart

Interactive Demo

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

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

border-block-start: 1rem dashed;
writing-mode: horizontal-tb;

border-block-start: 5px double #E1341E;
writing-mode: vertical-lr;

Syntax

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

Values

• <border-block-start-width>Specifies the width of the border
• <border-block-start-style>Specifies the style of the border
• <border-block-start-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;
  border-block-start: 5px solid green;
  writing-mode: vertical-rl;
}

Browser Support

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

Desktop
79	69	41	56	12.1

Tablets / Mobile
69	41	48	12.2	10	69

Last updated by CSSPortal on: 1st January 2024