border-block

Definition

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

Examples

Set the border style, width, and color for all four edges to solid, 10 pixels, and red, respectively

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

Set the border style, width, and color for the top and bottom edges to solid, 10 pixels, and red, and the left and right edges to dotted, 5 pixels, and blue

.my-element {
  border-block: solid 10px red dotted 5px blue;
}

Set the border style, width, and color for the block-start and block-end edges to solid, 10 pixels, and red, and the inline-start and inline-end edges to dotted, 5 pixels, and blue

.my-element {
  border-block-start: solid 10px red;
  border-block-end: solid 10px red;
  border-inline-start: dotted 5px blue;
  border-inline-end: dotted 5px blue;
}

Use the 'none' value to remove the border style

.my-element {
  border-block: none;
}

Use the 'hidden' value to hide the border, but still reserve space for it in the layout

.my-element {
  border-block: hidden;
}

Values

Best Practices

• Use the border-block property as a shorthand property to set the border styles, widths, and colors for all four edges of an element in a single line of CSS.
• Use the none value to remove the border style, or the hidden value to hide the border but still reserve space for it in the layout.
• Use the initial value to set the property to its default value, or the inherit value to inherit the property from the parent element.
• 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 a color value, such as red or #ff0000, to set the border color.

Browser Compatibility