The CSS ‘border-block‘ property is a shorthand that simultaneously sets the width, style, and color of an element’s block-start and block-end borders. This property is part of the CSS Logical Properties and Values, which provides control over layout and styling in a writing-mode-independent way. It’s particularly useful in contexts where the writing mode might change, such as in internationalization, allowing borders to adapt based on the direction of the text.
CSS ‘border-block’ Property Examples
See the Pen CSS ‘border-block’ Property by Webzstore (@webzstore) on CodePen.
The ‘border-block‘ property enhances CSS’s ability to create flexible, direction-agnostic layouts that adapt to the global nature of web content, supporting various writing modes and directions seamlessly.
Browser Support For ‘border-block’ Property
 |  |  |  |  |
| 66.0 | 14.1 | 87.0 | 87.0 | 73.0 |
CSS Syntax of the ‘border-block’ Property
border-block: width style color | initial | inherit;
Usage of the ‘border-block’ Property
Use ‘border-block‘ to apply uniform styling to an element’s block-start and block-end borders. This is beneficial in responsive designs and for content that needs to support multiple languages and writing modes. By using ‘border-block,’ you can ensure that your border styling remains consistent and logical regardless of the writing mode.
Property Values of the ‘border-block’ Property
- Width: This setting specifies the thickness of the border. It accepts units like pixels (px), points (pt), ems (em), or keywords (thin, medium, thick).
- Style: Defines the line style of the border. Options include solid, dotted, dashed, and double, among others.
- Color: Sets the color of the border. Can be specified with named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA.
- Initial: Resets the ‘border-block‘ to its default state, using the initial values of the individual properties.
- Inherit: The element inherits the ‘border-block‘ property from its parent element.
Leave a Reply