CSS border-block-end-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-block-end-width CSS property is used to specify the width of the border on the end block of a block-level element. The "end" block is relative to the text direction, so it represents either the right or left side in horizontal writing modes and the top or bottom side in vertical writing modes. This property allows web developers to precisely control the thickness of borders on specific sides of an element, making it useful for creating custom layouts and designs in both horizontal and vertical text directions.

Initial value: medium
Applies to: all elements
Inherited: no
Computed value: absolute length; 0 if the border style is none or hidden
Animatable: by computed value type
JavaScript syntax: object.style.borderBlockEndWidth

Interactive Demo

border-block-end-width: 5px;
writing-mode: horizontal-tb;

border-block-end-width: 1rem;
writing-mode: vertical-rl;

border-block-end-width: thin;
writing-mode: horizontal-tb;

border-block-end-width: thick;
writing-mode: vertical-lr;

Example of the Border
Block End Width Property

Syntax

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

Values

<border-width>Specifies the width of the border

Example

HTML

<div class="box">

  This is a box with a border.

</div>

CSS

.box {
  border-block: 5px dashed;
  border-block-color: green;
  border-block-end-width: 5px;
  border-block-end-color: red;
  border-block-end-style: dashed;
  writing-mode: vertical-rl;
}

Result

Editor