1. css
  2. /properties
  3. /border-block-end-width

border-block-end-width

Definition

The border-block-end-width CSS property defines the width of the border on the end side of an element. It is a shorthand for setting the border-block-end-width property along with border-block-end-style and border-block-end-color.

Examples

Apply a thin border to the end side of the element

.my-element {
  border-block-end-width: 2px;
}

Apply a medium border to the end side of the element

.my-element {
  border-block-end-width: 4px;
}

Apply a thick border to the end side of the element

.my-element {
  border-block-end-width: 6px;
}

Apply a border with a width of 1/4 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.25em;
}

Apply a border with a width of 1/2 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.5em;
}

Apply a border with a width of 3/4 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.75em;
}

Apply a border with a width of 1/8 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.125em;
}

Apply a border with a width of 3/8 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.375em;
}

Apply a border with a width of 5/8 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.625em;
}

Apply a border with a width of 7/8 of the element's font size to the end side of the element

.my-element {
  border-block-end-width: 0.875em;
}

Values

ValueDescription
thinThin border.
mediumMedium border.
thickThick border.
lengthCustom width of the border in px, em, rem, etc.
initialSets the property to its default value.
inheritInherits the value from the parent element.

Best Practices

  • Use the border-block-end shorthand property instead of the individual properties (border-block-end-width, border-block-end-style, and border-block-end-color) whenever possible, as it is easier to read and maintain.
  • Use the border-block-end-width property in conjunction with the border-block-end-style and border-block-end-color properties to fully specify the border on the end side of the element.
  • Avoid using excessively thick or thin borders, as they can make the element look disproportionate or unbalanced.
  • Use the border-block-end-width property in combination with other border properties (e.g., border-top, border-right, etc.) to create more complex border styles.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes