CSS border-block-width Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-block-width property setting logical block-start and block-end border thickness
Definition

Definition and Usage

The border-block-width property sets the thickness of the logical block-start and block-end borders. It is a shorthand for border-block-start-width and border-block-end-width.

In the default writing-mode: horizontal-tb, that maps to top and bottom. In vertical writing, the same rule can map to left and right. Pair it with a visible border-block-style and optional border-block-color, or use the border-block shorthand. The inline sides use border-inline-width.

Standard-track.

Not deprecated. Baseline widely available since April 2021. Internet Explorer does not support logical border properties.

Experimental.

A hairline keyword appears in newer border specs, but browsers do not support it reliably yet. Prefer thin or a length such as 1px.

Syntax

CSS Syntax

syntax.css
border-block-width: <line-width> | <line-width> <line-width> | initial | inherit;

One value sets both sides. Two values set block-start, then block-end. The initial value is medium.

Values

Property Values

ValueDescriptionTry it
thinA thin line. Exact size is browser-definedTry it
mediumDefault. A medium line. Exact size is browser-definedTry it
thickA thick line. Exact size is browser-definedTry it
<length>A non-negative length such as 4px or 0.25emTry it
0No thickness. The block borders disappearTry it
initialSets this property to its default value, mediumTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-block-width

Pick a thickness, show a visible style, then let the writing mode place it on the block axis.

  1. Set a visible border-block-style such as solid.
  2. Set border-block-width to a keyword or length (4px, thick, and so on).
  3. Optionally set border-block-color, or rely on currentColor.
  4. Use two values when block-start and block-end need different thicknesses.
PieceRequired?Role
Visible styleYesWithout solid (or another visible style), width has nothing to draw
WidthYesKeyword or length. 0 hides the border
ColorOptionalDefaults to currentColor if omitted
Writing modeOptionalChanges which physical edges are the block sides
Try it

Live Preview

Style and color stay fixed. Change only border-block-width and watch the top and bottom thickness.

Only the block-start and block-end edges change. Inline sides stay blank.

Block borders

Block axis

border-block-width: 4px

Code

CSS Examples

Each snippet uses only what border-block-width needs: a width, a visible style, and a color. Use Try It Yourself for a live editor.

Example 1 — Same Width on Both Sides

One length draws the same 4px thickness on block-start and block-end.

CSS
<style>
  p {
    border-block-width: 4px;
    border-block-style: solid;
    border-block-color: #1d4ed8;
  }
</style>

<p>4px block borders</p>
Try It Yourself

How It Works

  1. Set the thickness. border-block-width: 4px applies to both block sides.
  2. Show a style. solid makes the border visible. Width alone would not draw a line.
  3. Pick a color. Blue shows clearly. Without a color, the border uses currentColor.
  4. One value, two edges. Block-start and block-end both get 4px. Left and right stay untouched.

Example 2 — Different Start and End

Two values: thin on block-start, thick on block-end.

CSS
<style>
  p {
    border-block-width: 2px 8px;
    border-block-style: solid;
    border-block-color: #1d4ed8;
  }
</style>

<p>2px start, 8px end</p>
Try It Yourself

How It Works

  1. Write two widths. The first is block-start. The second is block-end.
  2. Read left to right. In horizontal writing, that means 2px on top and 8px on bottom.
  3. Keep style and color shared. Both edges still use the same solid blue unless you override the longhands.
  4. Same as the longhands. This matches setting border-block-start-width and border-block-end-width separately.

Example 3 — Vertical Writing Mode

The same thick block widths follow the block axis when text turns vertical.

CSS
<style>
  p {
    writing-mode: vertical-rl;
    border-block-width: 8px;
    border-block-style: solid;
    border-block-color: #1d4ed8;
  }
</style>

<p>Vertical block borders</p>
Try It Yourself

How It Works

  1. Turn the text. writing-mode: vertical-rl makes lines run top to bottom.
  2. Keep the logical rule. border-block-width: 8px still means block-start and block-end.
  3. Watch the physical edges. In vertical-rl, those sides land on the right and left, not top and bottom.
  4. Why logical properties help. One rule stays correct when the writing mode changes. Physical border-top-width would not.

Edge Cases & Pitfalls

If the border looks missing, check the style, the width, and which axis you meant.

style

Width needs a visible style

The default style is none. Setting only border-block-width leaves no border until you add border-block-style: solid (or use border-block).

zero

0 removes the border

A width of 0 draws nothing, even with a solid style and a color. Use a positive length or a keyword when you want a line.

keywords

thin, medium, and thick vary by browser

Those keywords are not fixed pixel sizes. Prefer a length such as 2px when you need a consistent thickness across browsers.

axis

Block is not always top and bottom

With writing-mode: vertical-rl, block sides map to the physical right and left. Use logical properties when layout must follow text flow.

negative

Negative lengths are invalid

A negative width is ignored. Use 0 or a positive length only.

Compatibility

Browser Support

border-block-width is a browser style property from CSS Logical Properties. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since 2021

border-block-width

Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+, Opera 73+. Internet Explorer has no support.

97% global support
Google Chrome 87+
Full support
Mozilla Firefox 66+
Full support
Apple Safari 14.1+
Full support
Microsoft Edge 87+
Full support
Opera 73+
Full support
Samsung Internet 14.0+
Full support
Internet Explorer No
No support
border-block-width Widely supported

Bottom line: Safe in current browsers. For older Internet Explorer, fall back to physical properties such as border-top-width and border-bottom-width.

Remember

Key Takeaways

  • Role: set the thickness of the logical block-start and block-end borders.
  • One or two values: one sets both sides; two set start, then end.
  • Needs a style: width alone is invisible until border-block-style is visible.
  • Initial value: medium. Prefer lengths when you need a fixed size.

One line: border-block-width controls how thick the block-axis borders are in a writing-mode-aware way.

Frequently Asked Questions

It sets the thickness of the logical block-start and block-end borders. In horizontal-tb writing, that is usually the top and bottom borders. The physical edges change with writing-mode, direction, and text-orientation.
The initial value is medium for both sides. The exact pixel size of medium is browser-defined, often around 3px.
Yes. One value sets both block-start and block-end. Two values set block-start first, then block-end. Example: 2px 8px.
Width alone is not enough. You need a visible border-block-style such as solid. A width of 0 also draws no border.
border-top-width always targets the physical top edge. border-block-width follows the block axis, so in vertical writing it can land on the left or right edges instead.
Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+, and Opera 73+. Internet Explorer does not support it. It is a browser style property, not a Node.js feature.

Next: border-bottom

Set the physical bottom border in one shorthand.

border-bottom tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-block-style Property CSS border-bottom Property