CSS border-inline attribute

Previous Page border-image-width
Next Page border-inline-color

Definition and Usage

border-inline The property is an abbreviation of the following properties:

If the value of color or width is omitted, the default value will be used.

CSS's border-inline property with border The properties are very similar, but border-inline The property depends on the inline direction.

Note:and related 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 The effect of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Example

Example 1

Set the style, color, and width of the border for different inline direction elements:

h1 {
  border-inline: 5px solid red;
}
h2 {
  border-inline: 4px dotted blue;
}
div {
  border-inline: double;
}

Try It Yourself

Example 2: Combined with writing-mode Property

The border at the start and end positions of the inline direction is affected by writing-mode The Effect of the Property:

div {
  writing-mode: vertical-rl;
  border-inline: hotpink dashed 8px;
}

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
border-inline-width	Specifies the width of the border on the inline direction. The default value is "medium".
border-inline-style	Specifies the style of the border on the inline direction. The default value is "none".
border-inline-color	Specifies the color of the border on the inline direction. The default value is the text 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 color
Inheritance:	No
Animation:	yes, see individual properties. Read about animatable
Version:	CSS3
JavaScript Syntax:	object.style.borderInline="dashed hotpink 10px"