CSS border-block-start Property

Sets the individual logical block-start border property values in a single declaration.

selector { border-block-start: <line-width> || <line-style> || <color>; }
<line-width> Sets the thickness of the border using length units like px, em, or keywords like thin, medium, or thick.
<line-style> Specifies the line type such as solid, dashed, dotted, or double.
<color> Defines the color of the border using hex, rgb, or named color values.

Code Examples

A basic example showing a thick red border at the top of a div in standard horizontal layout.

div {
  border-block-start: 5px solid #ff0000;
  padding: 20px;
  writing-mode: horizontal-tb;
}

An advanced example demonstrating how the border moves from the top to the right edge when the writing mode is toggled via JavaScript.

<div id="contentBox" style="border-block-start: 4px dashed #0000ff; padding: 10px;">
  This box has a logical start border.
</div>

<button onclick="toggleFlow()">Toggle Writing Mode</button>

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

Pro Tip

If you want to apply the same border to both the start and the end of the block axis, skip this and use the border-block shorthand. It keeps your code even tighter by hitting two birds with one stone.

Deep Dive

Think of border-block-start as a smart border. In a standard top-to-bottom layout, it acts exactly like border-top. However, if the writing-mode changes to vertical-rl, the start of the block axis moves to the right side. This property is part of the CSS Logical Properties and Values module, which allows developers to control layout based on the flow of content rather than the physical edges of the screen. It is a shorthand for border-block-start-width, border-block-start-style, and border-block-start-color.

Best Practices

Use this property when you are developing for a global audience where writing directions might change. It ensures that your UI remains semantically correct and visually consistent across different languages without needing to write specific overrides for every direction. It is a cleaner way to handle the flow-relative start of any element.

Common Pitfalls

The most common headache occurs when you mix logical properties with physical properties like border-top in the same CSS rule. The order of the cascade will determine which one wins, but it can lead to confusion if you are not tracking how the writing-mode is set. Also, older browsers without logical property support will ignore this, so ensure your target environment is modern.

Accessibility

Borders are often used as visual cues to separate content sections. Ensure that the border-block-start-color has a high enough contrast ratio against the background color to be distinguishable by users with visual impairments. Relying on color alone to convey meaning is a no-go; use the border as a structural aid.

Dev Data Table: border-block-start property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderBlockStart = "2px solid #000000";
js_syntax_2 element.style.setProperty("border-block-start", "2px solid #000000");
js_note When using camelCase in JavaScript, the property maps to borderBlockStart.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...