CSS border-inline-start-width Define Logical Border Width

Introduction

The border-inline-start-width property in CSS is a handy tool for web developers. It lets you define the width of the logical inline-start border of an element. This property is especially useful because it adapts to the element’s writing mode, direction, and text orientation, making your designs more flexible.

Depending on the values set for properties like writing-mode, direction, and text-orientation, border-inline-start-width corresponds to one of the physical border widths: border-top-width, border-right-width, border-bottom-width, or border-left-width. This flexibility makes it great for creating responsive designs.

This property has been widely supported across browsers since September 2021, ensuring compatibility and reliability.

Baseline Widely Available

The border-inline-start-width property is well established and widely available across many devices and browser versions. It has been supported since September 2021, ensuring compatibility and reliability for web developers and designers.

Description

The border-inline-start-width property in CSS defines the width of the logical inline-start border of an element. This property adapts to the element’s writing mode, direction, and text orientation, making it very useful in web design.

For example, in a left-to-right (LTR) writing mode, border-inline-start-width corresponds to border-left-width. In a right-to-left (RTL) writing mode, it corresponds to border-right-width. Similarly, in vertical writing modes, it may correspond to border-top-width or border-bottom-width.

By using border-inline-start-width, web developers can ensure their designs remain consistent and adaptable across different languages and writing systems.

Syntax

The border-inline-start-width property in CSS is easy to use. Here’s how you can define it:

/* <'border-width'> values */
border-inline-start-width: 5px;
border-inline-start-width: thick;

/* Global values */
border-inline-start-width: inherit;
border-inline-start-width: initial;
border-inline-start-width: revert;
border-inline-start-width: revert-layer;
border-inline-start-width: unset;

Explanation

• <'border-width'> values: These values define the width of the border. You can use units like pixels (px) or keywords like thin, medium, and thick.
• Global values: These values let you inherit the border width from the parent element (inherit), reset the border width to its initial value (initial), revert to the user agent’s default style for the element (revert), revert to the user agent stylesheet’s value for the element (revert-layer), or unset all changes to the property (unset).

Example

Here’s a simple example to illustrate the use of the border-inline-start-width property:

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

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

.exampleText {
  writing-mode: vertical-lr; /* Vertical text writing mode */
  border: 1px solid blue;
  border-inline-start-width: 5px; /* Set the inline-start border width */
}

In this example, the border-inline-start-width property sets the width of the logical inline-start border of the element with the class exampleText. The writing-mode property is set to vertical-lr, so the text is written vertically from top to bottom, and the inline-start border corresponds to the top border in this case.

Values

The border-inline-start-width property in CSS accepts specific values that define the width of the logical inline-start border of an element. Here’s a breakdown of the available values:

<'border-width'> Values

• Length values (e.g., px, em, rem): You can specify the width of the border using length units. For example, border-inline-start-width: 5px; sets the border width to 5 pixels.
• Keywords (thin, medium, thick): These keywords define predefined widths for the border.
  • thin: Sets the border width to a thin line.
  • medium: Sets the border width to a medium line (default value).
  • thick: Sets the border width to a thick line.

Global Values

• inherit: Inherits the border width from the parent element.
• initial: Sets the border width to its initial value (medium).
• revert: Reverts the border width to the user agent’s default style for the element.
• revert-layer: Reverts the border width to the user agent stylesheet’s value for the element.
• unset: Resets the border width to its natural value, which means it acts as initial if the property is naturally not inherited, or inherit if it is.

Example

/* Setting border width using length value */
border-inline-start-width: 5px;

/* Setting border width using keyword */
border-inline-start-width: thick;

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

Formal Definition

The border-inline-start-width property in CSS is formally defined to specify the width of the logical inline-start border of an element. Here are the key details of its formal definition:

Explanation

• Initial Value: The default value for border-inline-start-width is medium.
• Applies to: This property applies to all HTML elements.
• Inherited: The border-inline-start-width property is not inherited from the parent element.
• Percentages: When using percentage values, they refer to the logical width of the containing block.
• Computed Value: The computed value is an absolute length. If the border style is set to none or hidden, the computed value is 0.
• Animation Type: Animations can be applied to this property based on its computed value type.

Formal Syntax

The formal syntax for the border-inline-start-width property is as follows:

border-inline-start-width =
  <line-width>

<line-width> =
  [<length>] | thin | medium | thick

• <length>: A length value (e.g., 5px) that defines the width of the border.
• thin: Sets the border width to a thin line.
• medium: Sets the border width to a medium line (default value).
• thick: Sets the border width to a thick line.

Example

Here is an example of how to use the border-inline-start-width property with various values:

CSS

/* Using a length value */
border-inline-start-width: 5px;

/* Using keywords */
border-inline-start-width: thin;
border-inline-start-width: medium;
border-inline-start-width: thick;

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

Contextual Usage

• Length values: You can specify the border width using different units such as pixels (px), ems (em), or rems (rem).
• Keywords: The keywords thin, medium, and thick provide predefined widths for the border.
• Global values: These values allow you to inherit the border width from the parent element (inherit), reset the border width to its initial value (initial), revert to the user agent’s default style for the element (revert), revert to the user agent stylesheet’s value for the element (revert-layer), or unset all changes to the property (unset).

By following this formal syntax, web developers can precisely control the appearance of the inline-start border, ensuring that their designs are consistent and adaptable across different writing modes and directions.

Examples

To help illustrate how the border-inline-start-width property works, let’s look at a couple of examples. These examples will showcase how to use this property in different contexts and how it affects the appearance of the element’s border.

Example 1: Basic Usage

In this example, we will set the border-inline-start-width to a specific length value and observe its effect on the element.

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

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

.exampleText {
  writing-mode: vertical-lr; /* Vertical text writing mode */
  border: 1px solid blue;
  border-inline-start-width: 5px; /* Set the inline-start border width */
}

In this example, the border-inline-start-width property sets the width of the logical inline-start border of the element with the class exampleText. The writing-mode property is set to vertical-lr, so the text is written vertically from top to bottom, and the inline-start border corresponds to the top border in this case.

Example: Using Keywords

CSS

.exampleText {
  writing-mode: vertical-lr; /* Vertical text */
  border: 1px solid blue;
  border-inline-start-width: thick; /* Set the inline-start border width using a keyword */
}

Here, the border-inline-start-width is set to thick, which is a predefined keyword for a thicker border.

Example: Inheriting Border Width

HTML

<div class="parent">
  <p class="exampleText">Example text</p>
</div>

CSS

div.parent {
  background-color: yellow;
  width: 120px;
  height: 120px;
  border: 5px solid blue; /* Set the border width for the parent element */
}

.exampleText {
  writing-mode: horizontal-tb; /* Horizontal text */
  border: inherit; /* Inherit the border properties from the parent element */
  border-inline-start-width: inherit; /* Inherit the inline-start border width */
}

In this case, the border-inline-start-width is set to inherit, so it will inherit the border width from the parent element.

Example: Using Global Values

CSS

div.exampleText {
  writing-mode: horizontal-tb; /* Horizontal text */
  border: 1px solid blue;
  border-inline-start-width: revert; /* Revert to the user agent's default style */
}

Here, the border-inline-start-width is set to revert, which means it will revert to the default style of the user agent.

Specifications

The border-inline-start-width property is defined in the CSS Logical Properties and Values Level 1 specification. It helps define styles that adapt to the writing mode and direction of the text.

Purpose

The purpose of border-inline-start-width is to allow web developers to set border widths that adapt to the writing mode and text direction. This makes it easier to create responsive designs that work well across different languages and writing systems.

Benefits

• Flexibility: Adapts to different writing modes and directions.
• Consistency: Ensures border styles remain consistent.
• Simplicity: Makes defining border widths more intuitive.

Browser Compatibility

The border-inline-start-width property is widely supported by major browsers, ensuring compatibility and reliability.

Related Properties

You might also want to explore these related properties:

• border-block-start-width
• border-block-end-width
• border-inline-end-width

These properties work together to define the other border widths of the element, providing a complete set of tools for creating adaptable designs.

See Also

For more information on CSS Logical Properties and Values, you can refer to these resources:

• CSS Logical Properties and Values
• MDN Web Docs

By understanding and using these resources, you can create more intuitive and flexible designs that work well across different devices and browsers.