CSS border-inline-end-width Enhance Responsive Design

Introduction

The border-inline-end-width CSS property defines the width of the logical inline-end border of an element. This border can be the top, right, bottom, or left border, depending on the element’s writing mode and direction.

Specification

The border-inline-end-width property is part of the CSS Logical Properties and Values Level 1 specification. This specification helps create more adaptable and responsive designs by defining logical properties and values.

Description

The border-inline-end-width CSS property defines the width of the logical inline-end border of an element. This border can be the top, right, bottom, or left border, depending on the element’s writing mode and direction.

This property maps to the border-top-width, border-right-width, border-bottom-width, or border-left-width properties, depending on the values set for writing-mode, direction, and text-orientation.

Syntax

/* Length values */
border-inline-end-width: 2px;
border-inline-end-width: thick;

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

Values

• Length values: Specific lengths like 2px, 1em, etc.
• Keyword values: Predefined keywords like thin, medium, and thick.
• Global values: General CSS values like inherit, initial, revert, revert-layer, and unset.

Formal Definition

Formal Syntax

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

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

Examples

Example 1: Applying a Border with Vertical Text

HTML:

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

CSS:

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

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}

Results:

This example shows how the border-inline-end-width property can be used to adjust the border width of an element with vertical text orientation. The border-inline-end-width is set to 5px, which visually highlights the end of the inline content.

Example 2: Adjusting Border Width in a Horizontal Layout

HTML:

<div class="container">
  <p class="horizontalText">This is a sample text.</p>
</div>

CSS:

.container {
  background-color: lightgray;
  width: 200px;
  height: 100px;
  padding: 10px;
}

.horizontalText {
  border: 2px solid black;
  border-inline-end-width: 10px;
}

Results:

This example demonstrates how the border-inline-end-width property can be used to adjust the border width of an element in a horizontal layout. The border-inline-end-width is set to 10px, creating a distinct border at the end of the inline content.

Example 3: Using Keyword Values

HTML:

<div class="box">
  <p class="thickBorder">Thick Border</p>
  <p class="mediumBorder">Medium Border</p>
  <p class="thinBorder">Thin Border</p>
</div>

CSS:

.box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

p {
  padding: 10px;
  background-color: lightblue;
  border-style: solid;
}

.thickBorder {
  border-inline-end-width: thick;
}

.mediumBorder {
  border-inline-end-width: medium;
}

.thinBorder {
  border-inline-end-width: thin;
}

Results:

This example shows how to use keyword values (thick, medium, thin) with the border-inline-end-width property. Each paragraph has a different border width, demonstrating the flexibility of the property.

Browser Compatibility

The border-inline-end-width property is well-supported across various browsers:

• Chrome: Supported since version 69.
• Firefox: Supported since version 41.
• Opera: Supported since version 56.
• Edge: Supported since version 79.
• Safari: Supported since version 12.1.

See Also

• CSS Logical Properties and Values: Comprehensive information on logical properties and values in CSS, essential for creating responsive and adaptable web designs.
• Related Properties:
  • border-block-start-width: Defines the width of the logical block-start border.
  • border-block-end-width: Defines the width of the logical block-end border.
  • border-inline-start-width: Defines the width of the logical inline-start border.
• Mapped Physical Border Properties:
  • border-top-width: Defines the width of the top border.
  • border-right-width: Defines the width of the right border.
  • border-bottom-width: Defines the width of the bottom border.
  • border-left-width: Defines the width of the left border.
• Related CSS Properties:
  • writing-mode: Defines the writing mode of an element.
  • direction: Specifies the text direction of an element.
  • text-orientation: Defines the orientation of text within an element.