CSS border-block-start-width Property

What You’ll Learn

The border-block-start-width property sets how thick the block-start border is on an element. In horizontal writing, that usually means the top border width.

Definition and Usage

The border-block-start-width property is a logical property that sets the width of the border on the start side of the block in an element. The start side is determined by the writing mode of the document or the element’s container.

This property is part of CSS Logical Properties, which provide a way to control layout using terms that depend on writing mode, directionality, and text orientation.

📝 Syntax

The syntax for border-block-start-width is straightforward. It accepts keyword values or length units.

selector {
  border-block-start-width: <length> | thin | medium | thick;
}

Basic Example

div {
  border-block-start-width: 5px;
  border-block-start-style: solid;
  border-block-start-color: black;
}

The value can be a keyword such as thin or a length such as 5px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-block-start-style and border-block-start-color for full control.
• Use border-block-start shorthand when setting width, style, and color together.

Default Value

The default value of border-block-start-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

💎 Property Values

The border-block-start-width property accepts keyword values and length units.

Block-Start Width and Writing Modes

The block-start edge follows the block axis, so the same width rule adapts when writing mode changes.

border-block-start-width vs border-top-width

Examples Gallery

Try border-block-start-width with pixel lengths, keyword sizes, and vertical writing mode.

<style>
  div {
    border-block-start-width: 5px;
    border-block-start-style: solid;
    border-block-start-color: black;
    padding-block-start: 0.75rem;
  }
</style>

<div>
  This is a div with a block-start border width of 5px.
</div>

.thin {
  border-block-start: thin solid #64748b;
}
.medium {
  border-block-start-width: medium;
  border-block-start-style: solid;
  border-block-start-color: #2563eb;
}
.thick {
  border-block-start: thick solid #dc2626;
}

.px-border {
  border-block-start: 2px solid #2563eb;
}
.em-border {
  border-block-start-width: 0.25em;
  border-block-start-style: solid;
  border-block-start-color: #059669;
}
.rem-border {
  border-block-start: 0.5rem solid #7c3aed;
}

.vertical-panel {
  writing-mode: vertical-rl;
  border-block-start-width: 6px;
  border-block-start-style: solid;
  border-block-start-color: #7c3aed;
  padding: 1rem;
}

💡 Best Practices