Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)
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.
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. 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.CSS 'border-block' Property Examples
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
Property Values of the 'border-block' Property
"*" indicates required fields