CSS 'border-block' Property Explained

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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website