CSS border-block Property

The border-block property is a shorthand that sets both the start and end borders of an element in the block dimension.

selector { border-block: <line-width> || <line-style> || <color>; }
<line-width> Defines the thickness of the border using specific lengths like px or em, or keywords like thin, medium, or thick.
<line-style> Sets the appearance of the border line, such as solid, dashed, dotted, or double.
<color> Determines the color of the border using any valid CSS color format.

Code Examples

This basic example applies a 5px solid blue border to the top and bottom of a div in standard horizontal writing mode.

div {
  border-block: 5px solid #0077ff;
  padding: 20px;
  background-color: #f4f4f4;
}

This advanced example uses JavaScript to toggle the writing-mode, demonstrating how the border-block property automatically shifts from top/bottom to left/right.

<div id="box" style="border-block: 10px double #333333; padding: 20px;">
  Click to rotate writing mode
</div>

<script>
const box = document.getElementById("box");
box.addEventListener("click", () => {
  box.style.writingMode = box.style.writingMode === "vertical-rl" ? "horizontal-tb" : "vertical-rl";
  if (box.style.writingMode === "vertical-rl") {
    box.style.borderBlock = "10px double #ff0000";
  } else {
    box.style.borderBlock = "10px double #333333";
  }
});
</script>

Pro Tip

You can use border-block: none; to quickly strip borders from the top and bottom of an element that might be inheriting unwanted styles from a global framework or parent rule. It is a quick way to clean up the 'sandwich' edges of a component.

Deep Dive

Think of your element as a stack of crates. The block dimension is the direction those crates are stacked. In a typical horizontal writing mode, like English, the block dimension is vertical. Using border-block is like putting a lid on the top crate and a pallet under the bottom one with a single line of code. It maps to border-block-start and border-block-end. The beauty of logical properties is that if the writing-mode changes to vertical, the borders automatically rotate to the left and right sides without you having to manually change border-top to border-left. It makes your layout smarter and more adaptable to internationalization.

Best Practices

Use border-block instead of separate border-top and border-bottom declarations when you want the styling to remain consistent across different language directions. It keeps your CSS lean and logic-based rather than physically anchored to the screen orientation.

Common Pitfalls

A common mistake is assuming this property affects all four sides like the standard border shorthand. It only targets the block axis. Also, be aware that if you define border-block and then a specific property like border-block-start later in the cascade, the more specific one will override that half of the shorthand.

Accessibility

Borders provide critical visual cues for the boundaries of interactive elements. Ensure that the color you choose for your border-block has enough contrast against the background so that users with visual impairments can clearly see the structure of your content.

Dev Data Table: border-block property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderBlock = "4px solid #ff8800";
js_syntax_2 element.style.setProperty("border-block", "4px solid #ff8800");
js_note The JavaScript property uses camelCase and acts as a setter for both the start and end block borders simultaneously.
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...