CSS border-inline-start property

Previous Page border-inline-end-width
Next Page border-inline-start-color

Definition and Usage

border-inline-start The property is a shorthand for the following properties:

CSS border-inline-start property is an abbreviation of the following CSS property: border-bottom,border-left,border-right and border-top Very similar, but border-inline-start The property depends on the inline direction.

Note:relevant CSS properties writing-mode,text-orientation and direction Defines the inline direction. This affects the start and end positions of a line, as well as border-inline-start The result of the attribute. For English pages, the inline direction is from left to right, and the block direction is from top to bottom.

Instance

Example 1

Set the border width, color, and style at the start of the inline direction:

div {
  border-inline-start: 10px solid pink;
}

Try it yourself

Example 2: Combined with the writing-mode attribute

The position of the border at the start of the inline direction is affected by writing-mode Attribute effect:

div {
  writing-mode: vertical-rl;
  border-inline-start: 5px solid blue;
}

Try it yourself

Example 3: Combined with the direction attribute

The position of the border at the start of the inline direction is affected by direction Attribute effect:

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

Try it yourself

CSS syntax

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

Attribute value

Value	Description
border-inline-start-width	Specifies the border width at the start of the inline direction for the element. The default value is medium.
border-inline-start-style	Specifies the border style at the start of the inline direction for the element. The default value is none.
border-inline-start-color	Specifies the border color at the start of the inline direction for the element. The default value is the current border color.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	medium none currentcolor
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderInlineStart="pink dotted 5px"