Introduction

The border-inline-start-style CSS property defines the style of the logical inline start border of an element. This property is useful in web development as it adapts to the element’s writing mode, directionality, and text orientation. Depending on these factors, border-inline-start-style can correspond to the border-top-style, border-right-style, border-bottom-style, or border-left-style properties.

Available since September 2021, this property is well-supported across many devices and browser versions. It helps create more flexible and responsive designs by aligning border styles with the flow of text.

Specification

The border-inline-start-style property is part of the CSS Logical Properties and Values Level 1 specification. This specification defines logical properties and values that adapt to the writing mode, directionality, and text orientation of elements, making it easier to create responsive and flexible web designs.

Specification Link:

• CSS Logical Properties and Values Level 1 - border-style

Description

The border-inline-start-style CSS property defines the style of the logical inline start border of an element. This property is crucial for web development and design, as it allows you to customize the border style based on the element’s writing mode, directionality, and text orientation. This makes it easier to create responsive and visually appealing web designs that adapt to different languages and text directions.

Unlike traditional border properties such as border-top-style, border-right-style, border-bottom-style, and border-left-style, which are fixed to specific sides of the element, border-inline-start-style is dynamic. It automatically adjusts to the logical start of the inline direction, ensuring that the border style aligns with the flow of the text.

This property is especially useful for creating internationalized web pages, as it can handle different writing modes (such as left-to-right, right-to-left, and vertical text) and directionalities (such as ltr and rtl). By using border-inline-start-style, you can ensure that your web designs remain consistent and user-friendly across various languages and text orientations.

Syntax

The border-inline-start-style CSS property follows a straightforward syntax, allowing you to define the style of the logical inline start border of an element. Here’s how you can use it:

/* <'border-style'> values */
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: groove;

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

Explanation of Syntax

• <'border-style'> values: These are the specific styles you can apply to the border, such as dashed, dotted, groove, and more.
• inherit: This value indicates that the property should inherit its value from its parent element.
• initial: This value sets the property to its default value.
• revert: This value resets the property to its default value as specified by the user agent’s default stylesheet.
• revert-layer: This value resets the property to its default value for the current layer.
• unset: This value resets the property to its natural value, which means it acts like inherit if the property is inherited, or like initial if it is not.

Values

The border-inline-start-style CSS property accepts a variety of values that define the style of the logical inline start border of an element. These values determine the appearance of the border and can be customized to suit different design requirements.

Border Style Values

• none: No border. This is the default value.
• hidden: Same as none, except in terms of border conflict resolution for border-collapsed tables.
• dotted: A series of dots.
• dashed: A series of short dashes.
• solid: A single, solid line.
• double: Two solid lines. The width of the lines and the space between them are not specified, but the total width is the value of border-width.
• groove: Appears to be carved into the page (inset).
• ridge: Opposite of groove. Appears to be coming out of the page (outset).
• inset: Appears to be embedded in the page, with the border edges raised.
• outset: Opposite of inset. Appears to be coming out of the page, with the border edges sunken.

Global Values

• inherit: Inherits the value from its parent element.
• initial: Sets the property to its default value.
• revert: Resets the property to its default value as specified by the user agent’s default stylesheet.
• revert-layer: Resets the property to its default value for the current layer.
• unset: Resets the property to its natural value. If the property is inherited, it acts like inherit; otherwise, it acts like initial.

Formal Definition

The border-inline-start-style CSS property defines the style of the logical inline start border of an element.

Formal Definition Details

• Initial value: none
• Applies to: All elements
• Inherited: No
• Computed value: As specified
• Animation type: Discrete

Explanation

• Initial value: The default value for border-inline-start-style is none, meaning no border is applied by default.
• Applies to: This property can be applied to all HTML elements.
• Inherited: The border-inline-start-style property is not inherited from the parent element. Each element must have its own specified value.
• Computed value: The computed value is the same as the specified value.
• Animation type: The border-inline-start-style property is discrete, meaning it does not support smooth transitions between different border styles.

Formal Syntax

The formal syntax for the border-inline-start-style CSS property is straightforward and follows a specific pattern.

Syntax Structure

border-inline-start-style = <line-style>;

<line-style> =
  none |
  hidden |
  dotted |
  dashed |
  solid |
  double |
  groove |
  ridge |
  inset |
  outset;

Explanation

• none: No border is applied.
• hidden: Same as none, but used for border conflict resolution in collapsed borders.
• dotted: A series of dots.
• dashed: A series of short dashes.
• solid: A single, solid line.
• double: Two solid lines. The width of the lines and the space between them are not specified, but the total width is the value of border-width.
• groove: Appears to be carved into the page (inset).
• ridge: Opposite of groove. Appears to be coming out of the page (outset).
• inset: Appears to be embedded in the page, with the border edges raised.
• outset: Opposite of inset. Appears to be coming out of the page, with the border edges sunken.

Global Values

• inherit: Inherits the value from its parent element.
• initial: Sets the property to its default value.
• revert: Resets the property to its default value as specified by the user agent’s default stylesheet.
• revert-layer: Resets the property to its default value for the current layer.
• unset: Resets the property to its natural value. If the property is inherited, it acts like inherit; otherwise, it acts like initial.

Examples

To better understand how the border-inline-start-style property works, let’s explore some practical examples. These examples will demonstrate how to apply different border styles to the logical inline start border of an element in various scenarios.

Example: Basic Usage

In this example, we will apply a dashed border to the logical inline start border of a paragraph element. The writing-mode property is used to change the text direction, allowing us to see how the border adapts to different writing modes.

HTML

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

CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}

Output

The paragraph text will be displayed vertically, and the logical inline start border will have a dashed style.

Example: Using Global Values

In this example, we will demonstrate how to use the inherit value to inherit the border style from a parent element.

HTML

<div class="parentElement">
  <p class="childElement">Inherited border style</p>
</div>

CSS

.parentElement {
  background-color: lightgray;
  width: 150px;
  height: 150px;
  border-inline-start-style: solid;
}

.childElement {
  border: 5px solid red;
  border-inline-start-style: inherit;
}

Output

The child element will inherit the solid border style from the parent element.

Example: Combining with Other Border Properties

In this example, we will combine border-inline-start-style with other border properties to create a more complex border design.

HTML

<div class="combinedBorders">
  <p class="exampleText">Combined border styles</p>
</div>

CSS

.combinedBorders {
  background-color: lightblue;
  width: 150px;
  height: 150px;
}

.exampleText {
  writing-mode: horizontal-tb;
  border: 5px solid green;
  border-inline-start-style: double;
  border-inline-end-style: dotted;
}

Output

The paragraph text will have a double border on the logical inline start side and a dotted border on the logical inline end side.

Example: Changing Writing Mode

In this example, we will change the writing mode to vertical-lr and apply a groove border style to the logical inline start border.

HTML

<div class="verticalText">
  <p class="exampleText">Vertical text with groove border</p>
</div>

CSS

.verticalText {
  background-color: lightgreen;
  width: 150px;
  height: 150px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid purple;
  border-inline-start-style: groove;
}

Output

The paragraph text will be displayed vertically, and the logical inline start border will have a groove style.

These examples demonstrate the flexibility and power of the border-inline-start-style property in adapting border styles to different writing modes and text orientations. By understanding and utilizing this property, you can create more dynamic and responsive web designs that cater to various languages and text directions.

Browser Compatibility

The border-inline-start-style property has been widely available since September 2021 and is well-supported across many devices and browser versions. This makes it a reliable tool for web developers. For detailed compatibility information, you can check the “Can I use” website for the latest updates.

Compatibility Link:

• Can I use - border-inline-start-style

By understanding the browser compatibility of the border-inline-start-style property, you can ensure that your web designs are consistent and functional across different browsers and devices.

Related Properties

The border-inline-start-style CSS property is part of a broader set of logical properties that help create responsive and flexible web designs. These related properties allow you to define the styles of other logical borders of an element, ensuring consistency and adaptability to different text orientations and writing modes. Here are some key related properties:

1. border-block-start-style

Defines the style of the logical block start border of an element. This can be useful for setting the border style at the start of the block direction.

.element {
  border-block-start-style: solid;
}

2. border-block-end-style

Defines the style of the logical block end border of an element. This sets the border style at the end of the block direction.

.element {
  border-block-end-style: dashed;
}

3. border-inline-end-style

Defines the style of the logical inline end border of an element. This sets the border style at the end of the inline direction.

.element {
  border-inline-end-style: dotted;
}

4. writing-mode

Specifies the writing mode of an element, determining the direction in which text is laid out. This affects how the logical border properties are applied.

.element {
  writing-mode: vertical-lr;
}

5. direction

Specifies the direction of text in an element. This can be set to ltr (left-to-right) or rtl (right-to-left), influencing the logical border properties.

.element {
  direction: rtl;
}

6. text-orientation

Specifies the orientation of the text within an element. This affects how the logical border properties are applied.

.element {
  text-orientation: upright;
}

Summary

Using these related properties along with border-inline-start-style helps you create adaptable and responsive web designs. These properties ensure consistency and accessibility across different text orientations and writing modes, making your web pages more user-friendly and visually appealing.

These properties work together to provide a comprehensive set of tools for defining the styles of logical borders, helping you achieve the desired visual effects and maintain consistency in your web designs.