CSS Border-Inline Enhance Web Design with Logical Borders

Introduction

The border-inline CSS property is a shorthand for setting inline border properties in one declaration. Introduced in September 2021, it is widely supported across most browsers and devices. This property allows you to define the inline borders of an element based on its writing mode and directionality, corresponding to border-top and border-bottom, or border-right and border-left properties, depending on the layout context. Using border-inline simplifies your CSS code, making it more readable and maintainable, which is especially useful in responsive web design.

Specification

The border-inline CSS property is defined in the CSS Logical Properties and Values Level 1 specification. This specification standardizes logical properties that adjust based on writing mode, directionality, and text orientation. The formal definition of border-inline can be found in the CSS Logical Properties and Values specification under #propdef-border-inline.

Syntax

The border-inline CSS property allows you to define the width, style, and color of the inline borders in a single declaration.

border-inline: <border-width> || <border-style> || <color>;

Key Components

1. <border-width>: Specifies the width of the border (e.g., 1px, 2em, thin, medium, thick).
2. <border-style>: Defines the style of the border (e.g., none, dotted, dashed, solid, double, groove, ridge, inset, outset).
3. <color>: Sets the color of the border (e.g., blue, #0000FF, rgb(0, 0, 255), hsl(240, 100%, 50%)).

Examples of Syntax

/* Setting only the border width */
border-inline: 1px;

/* Setting border width and style */
border-inline: 2px dotted;

/* Setting border width, style, and color */
border-inline: medium dashed blue;

/* Using global values */
border-inline: inherit;
border-inline: initial;
border-inline: revert;
border-inline: revert-layer;
border-inline: unset;

Combining Values

You can combine the values in any order:

border-inline: 2px solid red;
border-inline: dashed 3px green;
border-inline: blue 1px dotted;

Inherited and Global Values

• inherit: Inherits the value from the parent.
• initial: Sets to the initial value (medium none currentColor).
• revert: Resets to the browser’s default styling.
• revert-layer: Resets to the value for that layer.
• unset: Resets to inherited or initial value.

Values

The border-inline CSS property can be specified using a combination of values that define the width, style, and color of the inline borders.

Key Values

1. <border-width>: Length values (e.g., 1px, 2em) or keywords (thin, medium, thick).
2. <border-style>: Styles like none, dotted, dashed, solid, double, groove, ridge, inset, outset.
3. <color>: Any valid CSS color value.

Examples of Values

/* Setting only the border width */
border-inline: 1px;

/* Setting border width and style */
border-inline: 2px dotted;

/* Setting border width, style, and color */
border-inline: medium dashed blue;

/* Using global values */
border-inline: inherit;
border-inline: initial;
border-inline: revert;
border-inline: revert-layer;
border-inline: unset;

Constituent Properties

The border-inline CSS property is a shorthand for setting multiple logical inline border properties:

1. border-inline-color: Sets the color of the inline borders.
2. border-inline-style: Defines the style of the inline borders.
3. border-inline-width: Specifies the width of the inline borders.

Example of Constituent Properties

/* Setting individual properties */
border-inline-width: 2px;
border-inline-style: dashed;
border-inline-color: blue;

/* Using the shorthand property */
border-inline: 2px dashed blue;

Combining Constituent Properties

/* Using the shorthand property */
border-inline: 2px solid red;

/* Equivalent to */
border-inline-width: 2px;
border-inline-style: solid;
border-inline-color: red;

Formal Definition

The border-inline CSS property is a shorthand for setting the width, style, and color of the inline borders.

Initial Value

• border-inline-width: medium
• border-inline-style: none
• border-inline-color: currentcolor

Applies To

All elements.

Inherited

Not inherited.

Computed Value

• border-inline-width: Absolute length; 0 if style is none or hidden.
• border-inline-style: As specified.
• border-inline-color: Computed color value.

Animation Type

• border-inline-color: By computed value type.
• border-inline-style: Discrete.
• border-inline-width: By computed value type.

Formal Syntax

border-inline =
  [<'border-width'> || <'border-style'> || <color>]

<border-width> =
  [<length [0,∞]> | thin | medium | thick]

<border-style> =
  [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]

<color> =
  [any valid CSS color value]

Examples

Example 1: Basic Usage

<div class="example1">
  <p>This is a paragraph with a basic inline border.</p>
</div>

.example1 {
  background-color: yellow;
  width: 200px;
  height: 100px;
  border-inline: 2px solid blue;
}

Example 2: Vertical Text with Inline Border

<div class="example2">
  <p class="vertical-text">Example text</p>
</div>

.example2 {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.vertical-text {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}

Example 3: Inline Border with Different Styles

<div class="example3">
  <p>This is a paragraph with a dotted inline border.</p>
</div>

.example3 {
  background-color: yellow;
  width: 200px;
  height: 100px;
  border-inline: 3px dotted red;
}

Example 4: Shorthand vs. Longhand Properties

<div class="example4">
  <p class="shorthand">Shorthand inline border</p>
  <p class="longhand">Longhand inline border</p>
</div>

.example4 {
  background-color: yellow;
  width: 200px;
  height: 100px;
}

.shorthand {
  border-inline: 2px solid green;
}

.longhand {
  border-inline-width: 2px;
  border-inline-style: solid;
  border-inline-color: green;
}

Browser Compatibility

The border-inline property is widely supported in modern browsers like Firefox, Opera, and Edge. It ensures consistent behavior across different devices and platforms.

Best Practices for Browser Compatibility

1. Test Across Browsers: Always test your designs in multiple browsers.
2. Use Fallbacks: Include fallbacks for older browsers.
3. Stay Updated: Refer to the latest documentation.

Example of Browser Compatibility

<div class="example-box">
  <p>This is a paragraph with inline borders.</p>
</div>

.example-box {
  background-color: yellow;
  width: 200px;
  height: 100px;

  /* Shorthand property */
  border-inline: 2px solid blue;

  /* Fallback for older browsers */
  border-inline-width: 2px;
  border-inline-style: solid;
  border-inline-color: blue;
}

Conclusion

The border-inline property is a versatile tool for creating responsive web designs. Its wide support across browsers ensures consistent appearance and functionality. By understanding and using border-inline, you can enhance the visual appeal and usability of your web projects.

See Also

• CSS Logical Properties and Values
• border-top
• border-right
• border-bottom
• border-left
• writing-mode
• direction
• text-orientation These resources will help you learn how to use logical properties and border-related properties in CSS, making it easier to create responsive and adaptive web designs.