CSS 'border-block-end-style' Property Explained

The CSS 'border-block-end-style' property specifies the border style at the block-end of an element. This property is part of the CSS Logical Properties, designed to adapt border styling to the content layout and flow based on the writing mode. It allows for the setting of border styles that can dynamically adjust in internationalized contexts, where the direction of text and layout may vary.

CSS 'border-block-end-style' Property Examples

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

The 'border-block-end-style' property enhances CSS's capabilities for creating adaptable, internationally friendly designs by providing control over border styles in a logical, flow-relative manner.

Browser Support For 'border-block-end-style' Property

41.0	12.1	69.0	79.0	56.0

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

border-block-end-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Usage of the 'border-block-end-style' Property

Use 'border-block-end-style' to define how the border looks at the end of an element's block flow. In horizontal-tb writing modes (like English), it is typically the bottom border, but it can also be the right border in vertical writing modes. This property is crucial for designs that need to be responsive and adaptable across different languages and writing systems, ensuring the border's appearance is logical and consistent with the flow of content.

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

• None: No border is drawn, regardless of any border width.
• Hidden: The border is hidden, which can also affect table borders.
• Dotted: The border is a series of dots.
• Dashed: The border is a series of short line segments.
• Solid: The border is a single, solid line.
• Double: The border is two solid lines with some space between them.
• Groove: The border appears to be carved into the surface.
• Ridge: The border appears to protrude from the surface.
• Inset: The border makes the box appear embedded.
• Outset: The border makes the box appear to stand out.
• Initial: Resets the 'border-block-end-style' to its default value (none).
• Inherit: Inherits the 'border-block-end-style' from the element's parent.

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