CSS border-block Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-block property is part of the logical properties in CSS, which allow developers to define styles relative to the writing mode of the document rather than fixed physical directions like top, right, bottom, and left. Specifically, border-block is a shorthand property that sets both the border-block-start and border-block-end properties simultaneously. This means it controls the borders on the start and end edges of a block in the flow of content, which can vary depending on whether the text direction is left-to-right, right-to-left, horizontal, or vertical. By using border-block, designers can ensure consistent styling across different writing modes without manually adjusting each edge.

One of the key advantages of border-block is its adaptability in internationalization and responsive design. For example, when a page switches from a horizontal left-to-right layout to a vertical or right-to-left layout, the visual appearance of block borders remains logical and consistent, avoiding the need to redefine borders for each orientation. This logical approach simplifies styling for multilingual websites and components that may be reused in various layouts. It can also be particularly useful in dynamic content areas like articles, cards, or tables, where borders need to follow the block flow rather than fixed directions.

Additionally, border-block interacts seamlessly with other border-related properties, such as border for shorthand control over all borders, or individual properties like border-width, border-style, and border-color. While border-block itself only affects the block-start and block-end edges, it inherits the flexibility of these sub-properties, allowing for varied border widths, dashed or solid styles, and color customizations. Using border-block can reduce redundancy in CSS and make code easier to maintain, while also providing better semantic clarity since the borders reflect the structure of the content rather than arbitrary physical directions.

Definition

Initial value: See individual properties
Applies to: all elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.borderBlock

Interactive Demo

border-block: solid green;
writing-mode: horizontal-tb;

border-block: dashed blue;
writing-mode: vertical-rl;

border-block: 1rem solid purple;
writing-mode: horizontal-tb;
direction: rtl;

Example of the
Border Block Property

Syntax

border-block: <border-block-width> <border-block-style> <border-block-color>

Values

<border-block-width>Specifies the width of the border
<border-block-style>Specifies the style of the border
<border-block-color>Specifies the color of the border

Example

HTML

<div class='container'>

  <div class='card'>

    <h2>Border block (default)</h2>

    <p>border-block sets the block-start and block-end borders (top and bottom in horizontal writing modes).</p>

  </div>



  <div class='card vertical'>

    <h2>Border block (vertical)</h2>

    <p>writing-mode: vertical-rl  -  block borders follow the block axis.</p>

  </div>

</div>

CSS

/* Basic layout */
.container {
  display: flex;
  gap: 20px;
  padding: 20px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f6f8;
  min-height: 100vh;
  box-sizing: border-box;
}

.card {
  width: 320px;
  padding: 16px;
  background: #ffffff;
  border-block: 6px double #2a9d8f; /* top and bottom in horizontal writing mode */
  border-inline: 2px dashed #9aa0a6; /* left and right in horizontal writing mode */
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(11, 24, 32, 0.06);
}

/* Vertical example to demonstrate logical properties */
.card.vertical {
  writing-mode: vertical-rl;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-orientation: mixed;
}

.card h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.card p {
  margin: 0;
  line-height: 1.3;
  color: #374151;
  font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-block property. Hover over a browser icon to see the version that first introduced support for this CSS property.