CSS border-block-width

The border-block-width property in CSS is used to specify the width of the border on the block-axis (top and bottom sides) of an element. It can be used to set the width of the top and bottom borders individually or as a shorthand to set the width of all borders at once.

Syntax


selector {
    border-block-width: value;
}

Where value can be specified in pixels, ems, rems, or any other valid CSS length unit.

Examples

Result:

This is an example of using border-block-width to set the width of the top and bottom borders to 5 pixels.

In the above example, the top and bottom borders of the <div> element are each set to a width of 5 pixels using the border-block-width: 5px; property.

Result:

This is an example of using border-block-width as a shorthand to set different widths for the top and bottom borders.

In the above example, the top border width is set to 2 pixels and the bottom border width is set to 4 pixels using border-block-width: 2px 4px;.