CSS border-block-start-style Property

Description

The border-block-start-style is a CSS property that allows you to define the style of the border on the block-start side of an element in a block-level context, typically in the context of vertical writing modes like when using Asian or Middle Eastern scripts. It lets you specify whether the border should be solid, dashed, dotted, or any other supported line style, enabling fine-grained control over the appearance of the border on the top side of a block-level element when text is written vertically. This property is part of the CSS Box Alignment Module Level 3 and is useful for creating aesthetically pleasing and culturally appropriate designs in vertical text layouts.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.borderBlockStartStyle

Interactive Demo

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

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

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

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

Example of the Border
Block Start Style Property

Syntax

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

Values

<border-style>Specifies the style of the border

Example

HTML

<div class="box">

  This is a box with a border.

</div>

CSS

.box {
  border-block: 5px dashed;
  border-block-color: green;
  border-block-start-width: 5px;
  border-block-start-color: red;
  border-block-start-style: dashed;
  writing-mode: vertical-rl;
}

Result

Editor