CSS border-block-style Property

Sets the line style for both the start and end borders in the block dimension of an element.

selector { border-block-style: value; }
none No border is displayed and the computed border width is forced to zero.
hidden Same as none, but used to resolve border conflicts in tables.
dotted Renders the border as a series of round dots.
dashed Renders the border as a series of short line segments.
solid Renders a single continuous solid line.
double Renders two parallel solid lines with some space between them.
groove Displays a 3D grooved look that appears carved into the page.
ridge Displays a 3D ridged look that appears to come out of the page.
inset Displays a 3D look that makes the element appear embedded.
outset Displays a 3D look that makes the element appear embossed.

Code Examples

A basic example showing a solid border applied to the block-start and block-end of a container.

<div style="border-block-style: solid; border-block-width: 4px; border-block-color: #333333; padding: 10px;">
  Standard horizontal block borders (top and bottom).
</div>

An advanced example demonstrating how logical block borders shift physically when the writing-mode is toggled via JavaScript.

<div id="demoBox" style="border-block-style: double; border-block-width: 6px; border-block-color: #007bff; padding: 20px; writing-mode: horizontal-tb;">
  Toggle the writing mode to see the borders shift.
</div>
<button onclick="toggleFlow()">Toggle Writing Mode</button>

<script>
function toggleFlow() {
  const el = document.getElementById("demoBox");
  if (el.style.writingMode === "horizontal-tb") {
    el.style.writingMode = "vertical-rl";
  } else {
    el.style.writingMode = "horizontal-tb";
  }
}
</script>

Pro Tip

If you want to quickly create a sandwich-style UI element with lines only on the top and bottom, this is your one-line solution. It is much cleaner than declaring border-top and border-bottom separately.

Deep Dive

The border-block-style property is a logical shorthand that controls the style of the borders perpendicular to the flow of text. Think of it like a smart toggle for the top and bottom borders in a standard English layout. If the writing-mode is set to horizontal-tb, it styles the top and bottom. If you switch to a vertical-rl writing mode, like in some Japanese layouts, those borders automatically move to the left and right sides. This is superior to physical properties like border-top-style because it adapts to internationalization without requiring extra CSS overrides.

Best Practices

Use this property when building layouts that must support multiple languages or directions. It simplifies your code by targeting two sides at once. Always ensure you define a border-block-width and border-block-color (or use the border-block shorthand) so the style is actually visible to the user.

Common Pitfalls

A common mistake is setting the style and wondering why it is invisible; remember that the default width is 0. You must give it a width to see it. Also, keep in mind that this property handles both the start and end sides simultaneously. If you need a different style for the top than the bottom, you cannot use this shorthand.

Accessibility

Border styles should provide enough visual contrast against the background so users with low vision can clearly see the element boundaries. Avoid using only color or very thin dotted styles to convey meaning, as these can be difficult to perceive for some users.

Dev Data Table: border-block-style property

default none
animatable no
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderBlockStyle = "dashed";
js_syntax_2 element.style.setProperty("border-block-style", "dashed");
js_note When manipulating logical properties in JavaScript, the style will automatically follow the element's current writing-mode.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...