CSS border-block-end-width Property

What You’ll Learn

The border-block-end-width property sets how thick the block-end border is on an element. In horizontal writing, that usually means the bottom border width.

Definition and Usage

The border-block-end-width CSS property sets the width of the border at the block-end of an element. The block-end is defined based on the element’s writing mode, so it could be the bottom or right side depending on text direction and layout.

This property is part of the CSS Logical Properties and Values module, which allows more flexible styling in different writing modes and text directions.

📝 Syntax

The syntax for border-block-end-width is straightforward. It accepts keyword values or length units.

selector {
  border-block-end-width: <length> | thin | medium | thick;
}

Basic Example

div {
  border-block-end-width: 5px;
  border-block-end-style: solid;
  border-block-end-color: black;
}

The value can be a keyword such as thin or a length such as 5px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-block-end-style and border-block-end-color for full control.
• Use border-block-end shorthand when setting width, style, and color together.

Default Value

The default value of border-block-end-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

💎 Property Values

The border-block-end-width property accepts keyword values and length units.

Block-End Width and Writing Modes

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

border-block-end-width vs border-bottom-width

Examples Gallery

Try border-block-end-width with pixel lengths, keyword sizes, and vertical writing mode.

<style>
  div {
    border-block-end-width: 5px;
    border-block-end-style: solid;
    border-block-end-color: black;
    padding-block-end: 0.75rem;
  }
</style>

<div>
  This is a div with a block-end border width of 5px.
</div>

.thin {
  border-block-end: thin solid #64748b;
}
.medium {
  border-block-end-width: medium;
  border-block-end-style: solid;
  border-block-end-color: #2563eb;
}
.thick {
  border-block-end: thick solid #dc2626;
}

.px-border {
  border-block-end: 2px solid #2563eb;
}
.em-border {
  border-block-end-width: 0.25em;
  border-block-end-style: solid;
  border-block-end-color: #059669;
}
.rem-border {
  border-block-end: 0.5rem solid #7c3aed;
}

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

💡 Best Practices