GeezerVison

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

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

`border-block-start` 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 CSS shorthand property sets the individual logical block-start border property values in a single place in the style sheet.

Try it

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

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

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

border-block-start: thick double #32a1ce;
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: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

border-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;

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

border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation.

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

Values

The border-block-start is specified with one or more of the following, in any order:

<line-width>: The width of the border. See border-width.
<line-style>: The line style of the border. See border-style.
<color>: The color of the border.

Formal definition

Initial value	as each of the properties of the shorthand: `border-block-start-width`: `medium` `border-block-start-style`: `none` `border-block-start-color`: `currentcolor`
Applies to	all elements
Inherited	no
Computed value	as each of the properties of the shorthand: `border-block-start-width`: the absolute `<length>`, snapped as a line width `border-block-start-style`: as specified `border-block-start-color`: computed color
Animation type	as each of the properties of the shorthand: `border-block-start-width`: by computed value type `border-block-start-style`: discrete `border-block-start-color`: by computed value type

Formal syntax

border-block-start = 
  <line-width>  ||
  <line-style>  ||
  <color>       

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

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Examples

Border 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-rl;
  border-block-start: 5px dashed blue;
}

Specifications

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

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Aug 27, 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.