CSS 'border-inline' Property Explained

The CSS 'border-inline' property is a shorthand that specifies the width, style, and color of the borders along an element's inline start and inline end. It's part of the CSS Logical Properties, which are designed to support layout and styling in a writing-mode-aware manner. This property is particularly useful in creating layouts that adapt to different writing systems and directions, such as left-to-right (LTR) or right-to-left (RTL).

CSS 'border-inline' Property Examples

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

The 'border-inline' property enhances CSS's capability for creating adaptable, direction-aware designs, facilitating the development of web content that is accessible and visually consistent across various languages and writing systems.

Browser Support For 'border-inline' Property

66.0	14.1	87.0	87.0	73.0

CSS Syntax of the 'border-inline' Property

border-inline: width style color | initial | inherit;

Usage of the 'border-inline' Property

Use 'border-inline' to simultaneously define the styling of the borders that run along the side of an element parallel to the text flow. This is crucial for designs that must be flexible across various languages and writing modes, ensuring that the visual presentation of the element remains consistent and logical regardless of the direction of the text.

Property Values of the 'border-inline' Property

• Width: This specifies the thickness of the border. Acceptable units include pixels (px) and ems (em), and keywords like thin, medium, and thick.
• Style: Determines the line style of the border (solid, dotted, dashed, double, etc.).
• Color: This sets the border color. It can be specified with named colors, HEX codes, RGB(a), and HSL(a) values.
• Initial: Resets the 'border-inline' to its default values.
• Inherit: Inherits the 'border-inline' 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 his company, 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