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

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