GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing developer.mozilla.org — border-block-start-width CSS property - CSS | MDN

`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.

See full compatibility
Learn more

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

/* <'line-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

<line-width>: Defines the width of the border, either as an explicit non-negative <length> or the keywords: thin, medium, or thick. The default is medium.

Formal definition

Initial value	`medium`
Applies to	all elements
Inherited	no
Computed value	the absolute `<length>`, snapped as a line width
Animation type	by computed value type

Formal syntax

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

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

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;
}

Results

Specifications

Specification
CSS Logical Properties and Values Module Level 1 # border-width

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jul 24, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.