CSS border-block-style Property

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

Definition and Usage

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

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 border-block-width and border-block-color, or use the border-block shorthand. The inline sides use border-inline-style.

Standard-track.

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

Syntax

CSS Syntax

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

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

Values

Property Values

ValueDescriptionTry it
noneDefault. No block border is drawnTry it
hiddenSame look as none, but can win in table border conflictsTry it
solidA single continuous lineTry it
dashedA series of short line segmentsTry it
dottedA series of round dotsTry it
doubleTwo parallel lines; needs a thicker width to show clearlyTry it
grooveLooks carved into the pageTry it
ridgeLooks raised off the pageTry it
insetLooks pressed into the pageTry it
outsetLooks pushed out from the pageTry it
initialSets this property to its default value, noneTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-block-style

Pick a visible style, give the border a width, then let the writing mode place it on the block axis.

  1. Set border-block-style to a visible keyword such as solid or dashed.
  2. Set border-block-width greater than 0 (for example 4px).
  3. Optionally set border-block-color, or rely on currentColor.
  4. Use two values when block-start and block-end need different styles.
PieceRequired?Role
Visible styleYesnone draws nothing. Use solid, dashed, and the others
WidthYesWithout thickness, most styles still look missing
ColorOptionalDefaults to currentColor if omitted
Writing modeOptionalChanges which physical edges are the block sides
Try it

Live Preview

Width and color stay fixed. Change only border-block-style and watch the top and bottom lines.

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

Block borders

Block axis

border-block-style: solid

Code

CSS Examples

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

Example 1 — Same Style on Both Sides

One value draws the same solid line on block-start and block-end.

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

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

How It Works

  1. Choose a visible style. solid draws a continuous line on both block sides.
  2. Give it thickness. border-block-width: 4px makes the line easy to see.
  3. Set a color. Blue shows clearly against the page. Without a color, the border uses currentColor.
  4. One value, two edges. Block-start and block-end both get solid. Left and right stay untouched.

Example 2 — Different Start and End

Two values: solid on block-start, dashed on block-end.

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

<p>Solid start, dashed end</p>
Try It Yourself

How It Works

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

Example 3 — Vertical Writing Mode

The same dashed block styles follow the block axis when text turns vertical.

CSS
<style>
  p {
    writing-mode: vertical-rl;
    border-block-style: dashed;
    border-block-width: 4px;
    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-style: dashed 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-style would not.

Edge Cases & Pitfalls

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

none

Initial value draws nothing

The default is none. Setting only width or color still leaves no border until the style is visible.

width

Style without width looks empty

Browsers need a positive border-block-width. Use the border-block shorthand to set width, style, and color together.

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.

hidden

hidden vs none

Both look invisible on normal boxes. In tables with border-collapse: collapse, hidden can suppress neighboring borders in a conflict.

double

double needs thickness

A 1px double border often looks like a single line. Use at least 3px or 4px so both strokes show.

Compatibility

Browser Support

border-block-style 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-style

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-style Widely supported

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

Remember

Key Takeaways

  • Role: set the line style on the logical block-start and block-end borders.
  • One or two values: one styles both sides; two set start, then end.
  • Needs a width: style alone is not enough. Pair with width (and usually color).
  • Logical: follows writing mode. Not the same as fixed top and bottom.

One line: border-block-style paints the block-axis borders in a writing-mode-aware way.

Frequently Asked Questions

It sets the line style 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 none for both sides. No block border is drawn until you set a visible style such as solid or dashed, plus a width greater than zero.
Yes. One value sets both block-start and block-end. Two values set block-start first, then block-end. Example: solid dashed.
none and hidden draw no line. You also need border-block-width greater than zero. Color defaults to currentColor, so a missing color alone is rarely the problem.
border-top-style always targets the physical top edge. border-block-style 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-block-width

Control how thick the logical block borders are.

border-block-width 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-start-width Property CSS border-block-width Property