border-block-width

Definition

border-block-width is a CSS property that specifies the width of the border on the block-start and block-end edges of an element. It is a shorthand property for setting the border-top-width, border-right-width, border-bottom-width, and border-left-width properties all at once.

Examples

Set the border width for all four edges to 10 pixels

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

Set the border width for the top and bottom edges to 10 pixels and the left and right edges to 5 pixels

.my-element {
  border-block-width: 10px 5px;
}

Set the border width for the block-start and block-end edges to 10 pixels and the inline-start and inline-end edges to 5 pixels

.my-element {
  border-block-start-width: 10px;
  border-block-end-width: 10px;
  border-inline-start-width: 5px;
  border-inline-end-width: 5px;
}

Use a percentage value to set the border width as a percentage of the element's width

.my-element {
  border-block-width: 10%;
}

Use the 'thin', 'medium', or 'thick' keyword values to set the border width to a predefined value

.my-element {
  border-block-width: thin;
}

Values

Best Practices

• Use the border-block-width property as a shorthand property to set the border widths for all four edges of an element in a single line of CSS.
• Use a length value, such as 10px or 1em, to set the border width in pixels or other absolute units.
• Use a percentage value, such as 10% or 50%, to set the border width as a percentage of the element's width.
• Use the thin, medium, or thick keyword values to set the border width to a predefined value.
• Use the initial value to set the property to its default value, or the inherit value to inherit the property from the parent element.

Browser Compatibility