border-block-style

Definition

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

Examples

Set the border style for all four edges to solid

.my-element {
  border-block-style: solid;
}

Set the border style for the top and bottom edges to solid and the left and right edges to dotted

.my-element {
  border-block-style: solid dotted;
}

Set the border style for the block-start and block-end edges to dotted and the inline-start and inline-end edges to dashed

.my-element {
  border-block-start-style: dotted;
  border-block-end-style: dotted;
  border-inline-start-style: dashed;
  border-inline-end-style: dashed;
}

Use the 'none' value to remove the border style

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

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

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

Values

Best Practices

• Use the border-block-style property as a shorthand property to set the border styles 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 the solid, double, dotted, or dashed values to set the border style to a simple style.
• Use the groove, ridge, inset, or outset values to add a 3D effect to the border.

Browser Compatibility