CSS border-block-end Property

Definition and Usage

The border-block-end property is a logical shorthand that sets border-block-end-width, border-block-end-style, and border-block-end-color on the block-end edge only.

In the default horizontal writing mode, that edge is the bottom. Change writing-mode, and the same rule can map to a different physical side. For the opposite edge, use border-block-start.

CSS Syntax

Same value shape as border, but for one logical edge. A style other than none is required for the line to appear.

Property Values

How to Use border-block-end

Border only the end of the block axis — usually the bottom in English layouts.

1. Choose the element that needs a line on its block-end edge.
2. Set a style such as solid or dashed. Without a style, nothing draws.
3. Add width and color as needed: border-block-end: 3px solid #2563eb;.
4. If both block sides should match, prefer border-block instead.

Live Preview

Change border-block-end and the writing mode. Only the block-end edge updates.

CSS Examples

Each snippet focuses on border-block-end. Use Try It Yourself for a live editor.

<style>
  div {
    border-block-end: 4px solid #2563eb;
    padding: 12px;
  }
</style>

<div>Bottom border only</div>

<style>
  div {
    border-block-end: 3px dashed #dc2626;
    padding: 12px;
  }
</style>

<div>Dashed block-end</div>

<style>
  div {
    writing-mode: vertical-rl;
    border-block-end: 4px solid #0f766e;
    padding: 12px;
  }
</style>

<div>Block-end follows writing mode</div>

Key Takeaways