CSS border-block-end-width Property

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

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

<div class="box">
This is a box with a border.
</div>
.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;
}

Browser Support

The following table will show you the current browser support for the CSS border-block-end-width property.

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 1st January 2024