CSS border-block-style

The border-block-style property specifies the style of the borders of a block element. It can be used to specify different styles for the four sides of an element's border, using a shorthand syntax or individual properties.

Syntax:


selector {
  border-block-style: value;
}

Values:

solid: a solid line border
dashed: a dashed line border
dotted: a dotted line border
double: a double line border
groove: a 3D grooved border
ridge: a 3D ridged border
inset: a 3D inset border
outset: a 3D outset border
none: no border

Examples:


    .border-example {
      border-block-style: solid;
    }

Result:

This is an example of a solid border.


    .border-example {
      border-block-start-style: dashed;
      border-block-end-style: dotted;
      border-block-start-width: 2px;
      border-block-end-width: 4px;
    }

Result:

This is an example of a different style and width for the start and end borders.

With the border-block-style property, you can easily customize the border styles of your block elements to create visually appealing layouts.