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



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.


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;


noneNo border
hiddenSame as none, except in terms of layout (see the outline property)
solidA solid border
doubleA double border
dottedA dotted border
dashedA dashed border
grooveA 3D grooved border
ridgeA 3D ridged border
insetA 3D inset border
outsetA 3D outset border
initialSets this property to its default value
inheritInherits this property from its parent element

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera