CSS border-block-start-style Property

Sets the line style of an element's logical block-start border, which dynamically maps to a physical border style based on the writing mode.

selector { border-block-start-style: value; }
none Specifies that no border should be drawn, and the border width is forced to zero.
hidden Similar to none, but primarily used to resolve border conflicts in table elements.
dotted Displays the border as a series of round dots.
dashed Displays the border as a series of short line segments or dashes.
solid Displays the border as a single, continuous, solid line.
double Displays two solid lines with a space between them, totaling the defined border width.
groove Creates a 3D effect that looks like the border is carved into the page.
ridge Creates a 3D effect that looks like the border is extruded or popping out.
inset Creates a 3D effect that makes the element look embedded within its parent.
outset Creates a 3D effect that makes the element look like it is coming out of the page.

Code Examples

A basic example showing a dashed logical start border on a standard div.

<div style="border-block-start-style: dashed; border-block-start-width: 4px; border-block-start-color: #ff6600; padding: 20px;">
  This container has a dashed logical start border.
</div>

An advanced example demonstrating how logical properties move the border automatically when the writing mode is toggled via JavaScript.

<div id="contentBox" style="writing-mode: horizontal-tb; border-block-start: 5px solid #000000; padding: 20px; background: #f0f0f0;">
  Click the button to change the text orientation and watch the border move.
</div>
<button onclick="toggleOrientation()">Toggle Writing Mode</button>

<script>
function toggleOrientation() {
  const box = document.getElementById("contentBox");
  const isHorizontal = box.style.writingMode === "horizontal-tb";
  box.style.writingMode = isHorizontal ? "vertical-rl" : "horizontal-tb";
  box.style.borderBlockStartStyle = isHorizontal ? "double" : "solid";
  box.style.borderBlockStartColor = isHorizontal ? "#0000ff" : "#000000";
}
</script>

Pro Tip

You can use this property to create responsive headers that automatically move from the top of an element to the side when the layout switches to a vertical orientation for creative typography or sidebar navigation.

Deep Dive

In a standard horizontal-tb writing mode, such as English, the block-start border is the top border. However, if the writing mode is changed to vertical-rl, the block-start becomes the right border. This is a logical property, meaning it focuses on the flow of content rather than physical screen directions like top, bottom, left, or right. Think of it like describing the front of a car; no matter which way the car is parked, the front is always the front. By using logical properties, you write more resilient CSS that adapts to different languages and layouts automatically without having to manually swap physical properties like border-top-style for border-right-style.

Best Practices

Use this property whenever you are building layouts intended for an international audience or reusable components. It ensures your decorative borders follow the logical flow of text. Always pair this with border-block-start-width and border-block-start-color, or use the border-block-start shorthand to ensure the border is actually visible.

Common Pitfalls

The most common mistake is expecting a border to appear while forgetting that the default width is 0. If you do not see your border, check that you have defined a width and a color. Also, remember that this property will not work in legacy browsers like Internet Explorer; if you must support them, you will need to provide physical property fallbacks.

Accessibility

Visual borders are often used to define hit areas or group related content. Ensure the style you choose provides enough visual contrast against the background so users with low vision can distinguish the element boundaries. Avoid using only style changes (like dotted vs solid) to convey meaning, as this can be subtle and hard to perceive for some users.

Dev Data Table: border-block-start-style property

default none
animatable no
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.borderBlockStartStyle = "dashed";
js_syntax_2 element.style.setProperty("border-block-start-style", "dashed");
js_note When manipulating this in JavaScript, use the camelCase version borderBlockStartStyle for direct property access or the kebab-case string when using the setProperty method.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 12.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 12.2, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...