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

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

ValueDescription
<length>A length value, such as 10px or 1em.
<percentage>A percentage value, such as 10% or 50%.
thinA thin border.
mediumA medium-width border.
thickA thick border.
initialSets this property to its default value.
inheritInherits this property from its parent element.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes