CSS border-block-end Property

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

Description

The CSS property border-block-end controls the border that appears on the element’s logical “block end” side - in other words, the side of the element that comes after the flow of blocks. Because it is a logical (writing-mode–relative) longhand, it targets the block-axis end rather than a fixed physical side like bottom or right. In practice this means you use border-block-end when you want to style the ending edge of a block in a way that automatically adapts across different writing systems and layout directions.

Which physical edge “block end” corresponds to depends on the page’s block flow. That mapping is determined by the writing-mode of the element (for example, in the common horizontal-tb mode the block end is the bottom; in vertical-rl or vertical-lr modes it becomes a left or right edge). The inline direction (the direction property) affects inline start/end but does not change which side is block-start or block-end; using logical properties keeps your border intent clear regardless of whether text flows left-to-right, right-to-left, or vertically.

From a layout perspective, the border applied by border-block-end participates in the box model and cascade like other border properties: it contributes to the element’s visual boundary and can affect available space and alignment (for example, adding a border can change how much room remains for content unless box-sizing or layout constraints compensate). It is not an inherited property, so it needs to be set on each element where you want that edge styled. For convenience and clarity when writing styles that should adapt across writing modes, border-block-end is commonly used alongside its logical counterparts and shorthands - for example the shorthand border-block or the paired longhand border-block-start - so you can control start and end independently or together.

Using border-block-end makes CSS more robust for internationalization and for components that must work across different orientations without rewriting physical side rules. Rather than switching between top/right/bottom/left in multiple media queries or when supporting vertical text, a logical approach with border-block-end keeps intent explicit and reduces the need for conditional styling.

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.borderBlockEnd

Interactive Demo

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

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

border-block-end: 1rem dashed;
writing-mode: horizontal-tb;

border-block-end: 5px double #E1341E;
writing-mode: vertical-lr;

Example of the Border
Block End Property

Syntax

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

Values

<border-block-end-width>Specifies the width of the border
<border-block-end-style>Specifies the styleof the border
<border-block-end-color>Specifies the colorof the border

Example

HTML

<body>

  <main class="container">

    <h1>border-block-end example</h1>



    <section class="example horizontal">

      <p class="box">This element uses <code>border-block-end</code> (horizontal writing mode)</p>

    </section>



    <section class="example vertical">

      <p class="box vertical-box">This element uses <code>border-block-end</code> (vertical-rl)</p>

    </section>

  </main>

</body>

CSS

:root {
  --accent: #2b7cff;
  --gap: 16px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 32px;
  background: #f7f9fc;
  color: #0b1220;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  display: grid;
  gap: var(--gap);
}

.example {
  padding: 18px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(11,18,32,0.06);
}

.box {
  padding: 12px;
  border-block-end: 6px dashed var(--accent);
  margin: 0;
}

.vertical .box {
  writing-mode: vertical-rl;
  width: 120px;
  height: 140px;
  display: inline-block;
  text-orientation: mixed;
}

Result

Editor

Browser Support

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