CSS border-block-width Property

What You’ll Learn

The border-block-width property sets how thick the block-start and block-end borders are on an element. In horizontal writing, that usually means the top and bottom border widths.

Definition and Usage

The border-block-width property is a shorthand that sets the width of the borders on the block-start and block-end sides of an element. In horizontal writing, block usually refers to the top and bottom borders.

This property is part of CSS Logical Properties. You can use one value for both sides or two values when block-start and block-end need different thicknesses.

📝 Syntax

The syntax for border-block-width accepts one or two keyword or length values:

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

Basic Example

div {
  border-block-width: 5px 10px;
  border-block-style: solid;
  border-block-color: blue;
}

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

Syntax Rules

• One value applies the same width to block-start and block-end.
• Two values set block-start first, then block-end.
• The initial value is medium, typically around 3 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-block-style and border-block-color for full control.
• Related longhands: border-block-start-width and border-block-end-width.

Default Value

The default value of border-block-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-width property accepts keyword values and length units.

Block Width and Writing Modes

Block-start and block-end follow the block axis, so the same width rule adapts when writing mode changes.

border-block-width vs border-top-width / border-bottom-width

Examples Gallery

Try border-block-width with two-value lengths, one value, keyword sizes, and vertical writing mode.

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

<div>
  This div has a 5px block-start border and a 10px block-end border.
</div>

.card {
  border-block-width: 4px;
  border-block-style: solid;
  border-block-color: #64748b;
  padding-block: 1rem;
}

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

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

💡 Best Practices