CSS border-inline-start Property

Description

The border-inline-start CSS property is used to set the border style, color, and width on the inline-start side of a block-level element. The inline-start side is determined by the element's writing mode, which means it could be the left side in a left-to-right writing mode (like English) or the right side in a right-to-left writing mode (like Arabic). This property is particularly useful in internationalization and localization scenarios, allowing developers to control the appearance of borders on the appropriate side of elements based on the text direction, enhancing the overall design and readability of web content.

Initial value

See individual properties

Applies to

all elements

Inherited

no

Computed value

See individual properties

Animatable

See individual properties

JavaScript syntax

object.style.borderInlineStart

Interactive Demo

border-inline-start: solid; 
writing-mode: horizontal-tb;

border-inline-start: dashed blue; 
writing-mode: vertical-rl;

border-inline-start: 1rem dashed;
writing-mode: horizontal-tb;

border-inline-start: 5px double #E1341E;
writing-mode: vertical-lr;

Syntax

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

Values

• <border-width>Specifies the width of the border
• <border-style>Specifies the style of the border
• <color>Specifies the color of the border

Example

<div>This is a box with a border around it.</div>

div {
  background-color:#eee;
  color:#8b008b;
  padding:.75em;
  width:300px;
  height:100px;
  border-inline-start: 4px dashed red;
}

Browser Support

The following table will show you the current browser support for the CSS border-inline-start property.

Desktop
79	69	41	56	12.1

Tablets / Mobile
69	41	48	12.2	10	69

Last updated by CSSPortal on: 1st January 2024