CSS 'border-block-end' Property Explained

The CSS 'border-block-end' property is a shorthand that allows you to set the width, style, and color of the border at the block-end of an element in a single declaration. This property is part of CSS Logical Properties and adapts to the writing mode of the document or element, making it especially useful in internationalized content where the direction of text may change.

CSS 'border-block-end' Property Examples

See the Pen CSS 'border-block-end' Property by Webzstore (@webzstore) on CodePen.

The 'border-block-end' property enhances the flexibility and adaptability of CSS for internationalization by providing logical, writing-mode-aware control over element borders, supporting the creation of more accessible and globally friendly web designs.

Browser Support For 'border-block-end' Property

41.0	12.1	69.0	79.0	56.0

CSS Syntax of the 'border-block-end' Property

border-block-end: width style color | initial | inherit;

Usage of the 'border-block-end' Property

Use 'border-block-end' to style the border that appears at the end of an element's block flow. This border is the bottom border in horizontal writing modes like English and the right border in vertical writing modes like traditional Japanese. It's particularly handy for creating consistent designs across different languages and writing systems, ensuring that the border styling is logical and adapts to the flow of content.

Property Values of the 'border-block-end' Property

• Width: Specifies the thickness of the border. It can be given in pixels (px), ems (em), or keywords (thin, medium, thick).
• Style: Determines the border style (solid, dotted, dashed, double, groove, ridge, inset, outset).
• Color: Sets the color of the border. It can be any valid CSS color value, like a named color, HEX, RGB, RGBA, HSL, or HSLA.
• Initial: Resets the 'border-block-end' to its default value, effectively removing any custom styling.
• Inherit: Inherits the 'border-block-end' settings from the 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