Mastering CSS border-inline-end for Web Design

Values

The border-inline-end CSS property allows you to define border width, style, and color in one declaration. Here are the values you can use:

• <'border-width'>: Sets the border width. Use keywords like thin, medium, or thick, or specify a length value like 1px or 2em.
• <'border-style'>: Sets the border style. Options include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.
• <color>: Sets the border color. Use any valid CSS color value, like named colors, hex values, RGB, RGBA, HSL, or HSLA.

Examples:

border-inline-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the border to its initial value (medium none currentColor).
• revert: Reverts to the value defined by the user-agent stylesheet.
• revert-layer: Reverts to the value defined by the next outer CSS layer.
• unset: Resets to the inherited value if it inherits, or to its initial value if it does not.

Examples

Let’s see how to use border-inline-end in practice.

Basic Usage

HTML:

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

CSS:

.exampleText {
  border-inline-end: 2px solid red;
}

In this example, the inline-end border of the paragraph is set to a 2px solid red line.

Different Border Styles

HTML:

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

CSS:

.exampleText {
  border-inline-end: 2px dashed red;
}

In this example, the inline-end border of the paragraph is set to a 2px dashed red line.

Combining Multiple Properties

HTML:

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

CSS:

.exampleText {
  border-inline-end: medium dashed blue;
}

In this example, the inline-end border of the paragraph is set to a medium-width dashed blue line.

Using Global Values

HTML:

<div class="parent">
  <p class="child">Example text with inherited border</p>
</div>

CSS:

.parent {
  border-inline-end: 3px dashed blue;
}

.child {
  border-inline-end: inherit;
}

In this example, the child paragraph inherits the border from the parent div.

Formal Syntax

The formal syntax for border-inline-end is:

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

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

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

• <line-width>: Specifies the border width.
• <line-style>: Defines the border style.
• <color>: Sets the border color.

Related Properties

• border-block-start: Defines the border at the start of the block direction.
• border-block-end: Defines the border at the end of the block direction.
• border-inline-start: Defines the border at the start of the inline direction.

These properties help create responsive designs that adapt to different writing modes and text orientations.

Specifications

The border-inline-end property is defined in the CSS Logical Properties and Values Level 1 specification. This specification aims to make styling more intuitive and flexible by using logical properties instead of physical ones, ensuring consistent styles across different languages and writing systems.

CSS Logical Properties and Values Level 1

• Specification Link: CSS Logical Properties and Values Level 1 # border-shorthands

Browser Compatibility

The border-inline-end property is widely supported across major browsers since September 2021. It works seamlessly across many devices and browser versions, making it a reliable choice for web development.

For detailed compatibility information, refer to:

• MDN Web Docs Browser Compatibility
• Can I Use Browser Compatibility

See Also

For further reading and related resources, explore the following topics:

• CSS Logical Properties and Values: Learn more about logical properties and values in CSS.
• Related Properties:
  • border-top: Defines the top border of an element.
  • border-right: Defines the right border of an element.
  • border-bottom: Defines the bottom border of an element.
  • border-left: Defines the left border of an element.
• Related Logical Properties:
  • border-block-start: Defines the border at the start of the block direction.
  • border-block-end: Defines the border at the end of the block direction.
  • border-inline-start: Defines the border at the start of the inline direction.

These related properties work together with border-inline-end to provide a complete set of logical borders for elements. By using these properties, you can create designs that are adaptable and responsive to different writing systems and text orientations.