CSS border-block-end Property

What You’ll Learn

The border-block-end property is a logical CSS shorthand for styling the border on the block-end side of an element. In horizontal writing, that usually means the bottom edge.

Definition and Usage

The border-block-end CSS property is a logical shorthand that sets the width, style, and color of the border on the block-end side of an element. The block-end side is the end of the block flow, which changes depending on the writing mode.

This property is useful for controlling borders in a way that adapts to different languages and text directions. It is commonly used for dividers, underlines on content blocks, and section separators that should follow logical layout rules.

📝 Syntax

The border-block-end shorthand sets width, style, and color on the block-end edge:

selector {
  border-block-end: <border-width> <border-style> <border-color>;
}

Basic Example

p {
  border-block-end: 3px solid blue;
}

You can also set the parts individually with longhand properties:

Syntax Rules

• Values follow the usual border order: width, then style, then color.
• A visible style such as solid is required for the border to show.
• Only the block-end edge is affected; other sides keep their existing borders.
• Pair with border-block-start when you need both logical block edges styled.
• Use padding-block-end to add space between content and the border.

Default Value

The default value for border-block-end comes from its longhand parts:

• border-block-end-width — medium
• border-block-end-style — none
• border-block-end-color — currentColor

Because the default style is none, no border is visible until you set a visible style such as solid.

💎 Property Values

The border-block-end shorthand accepts the same value types as other border shorthands.

Block-End and Writing Modes

The block-end edge follows the block axis, so the same rule adapts when writing mode changes.

border-block-end vs border-bottom

Examples Gallery

Try border-block-end on paragraphs, list items, dashed dividers, and vertical writing mode.

<style>
  p {
    border-block-end: 3px solid blue;
    padding-block-end: 0.75rem;
  }
</style>

<p>
  This paragraph has a 3px solid blue border on the block-end side.
</p>

.menu-item {
  border-block-end: 1px solid #e2e8f0;
  padding-block: 0.75rem;
}
.menu-item:last-child {
  border-block-end: none;
}

.note {
  border-block-end: 2px dashed #059669;
  padding-block-end: 1rem;
  margin-block-end: 1rem;
}

.vertical-panel {
  writing-mode: vertical-rl;
  border-block-end: 3px solid #7c3aed;
  padding: 1rem;
}

💡 Best Practices