border-block-start-width CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

Try it

border-block-start-width: thick;
writing-mode: horizontal-tb;

border-block-start-width: thick;
writing-mode: vertical-rl;

border-block-start-width: 4px;
writing-mode: horizontal-tb;

border-block-start-width: 4px;
writing-mode: vertical-lr;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

css
/* <'border-width'> values */
border-block-start-width: 5px;
border-block-start-width: thick;

/* Global values */
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;

Related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element.

Values

<'border-width'>

The width of the border. See border-width.

Formal definition

Initial valueApplies toInherited Computed value Animation type

medium

all elements

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

by computed value type

Formal syntax

border-block-start-width =
<line-width>

<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
This syntax reflects the latest standard as per CSS Borders and Box Decorations Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

Border width with vertical text

HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-start-width: 5px;
}