CSS border-block-end-style Property

What You’ll Learn

The border-block-end-style property defines the line style of the block-end border on an element. In horizontal writing, that usually means the bottom border style.

Definition and Usage

The border-block-end-style CSS property sets the style of the border on the block-end side of an element. In top-to-bottom languages like English, block-end usually corresponds to the bottom edge.

This property is especially useful in multi-directional layouts where writing mode can vary. It lets you control border appearance based on logical content flow instead of fixed physical sides.

📝 Syntax

The syntax for border-block-end-style is straightforward:

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

Basic Example

.solid-border {
  border-block-end-style: solid;
  border-block-end-width: 4px;
  border-block-end-color: blue;
}

The style value refers to the border line type, such as solid, dashed, or dotted.

Syntax Rules

• The initial value is none, which hides the block-end border.
• Common values include solid, dashed, and dotted.
• 3D-style keywords include groove, ridge, inset, and outset.
• Pair with width and color longhands, or use the border-block-end shorthand.
• Related longhands: border-block-end-width and border-block-end-color.

Default Value

The default value of border-block-end-style is none, meaning no block-end border is displayed until you choose a visible style.

💎 Property Values

The border-block-end-style property accepts standard CSS border style keywords.

Block-End Style and Writing Modes

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

border-block-end-style vs border-bottom-style

Examples Gallery

Try border-block-end-style with solid, dashed, dotted styles, and vertical writing mode.

<style>
  .solid-border {
    border-block-end-style: solid;
    border-block-end-width: 4px;
    border-block-end-color: blue;
    padding-block-end: 0.75rem;
  }
</style>

<div class="solid-border">
  This div element has a solid block-end border.
</div>

.section {
  border-block-end-style: dashed;
  border-block-end-width: 2px;
  border-block-end-color: #64748b;
  padding-block-end: 1rem;
}

.dashed {
  border-block-end: 2px dashed #2563eb;
}
.dotted {
  border-block-end-style: dotted;
  border-block-end-width: 2px;
  border-block-end-color: #dc2626;
}

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

💡 Best Practices