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: <line-width> || <line-style> || <color>;

border-inline: 2px solid red;      /* both inline borders: 2px, solid, red */
border-inline: dashed blue;        /* order does not matter; width defaults to medium */

• The width, style, and color can be given in any order, and each is optional.
• Omitted parts reset to their initial values: medium width, none style, and currentcolor color. Because the initial style is none, include a style or no border appears.
• The same values are applied to both the inline-start and inline-end borders. To style them differently, use border-inline-start and border-inline-end.

Usage of the 'border-inline' Property

Use 'border-inline' to simultaneously define the width, style, and color of the borders at an element's inline-start and inline-end edges, the edges where a line of text begins and ends. With writing-mode: horizontal-tb and direction: ltr (the default for English), these are the left and right borders, so border-inline sets the same values as border-left and border-right; with direction: rtl the inline-start border is the right one. In vertical writing modes (vertical-rl or vertical-lr) with direction: ltr, the inline edges are the top and bottom borders. The perpendicular pair is set with border-block. This is crucial for designs that must be flexible across various languages and writing modes.

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 (the default), and thick.
• Style: Determines the line style of the border (solid, dotted, dashed, double, etc.). The default is none, which draws no border.
• Color: This sets the border color. It can be specified with named colors, HEX codes, RGB(a), and HSL(a) values. The default is currentcolor (the element's text color).
• Initial: Resets the 'border-inline' to its default values.
• Inherit: Inherits the 'border-inline' from the parent element.