Course Schedule

CSS Reference Manual

CSS attribute

Elective courses

Course recommendation:

CodeW3C.com Treasure Box

CSS border-inline-style property

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

Definition and usage

border-inline-style The attribute sets the border style of the element in the inline direction.

border-inline-style The value of the attribute can be set in different ways:

If border-inline-style The attribute has two values:

border-inline-style: solid dotted;

The border style at the beginning of the inline direction is solid (solid).
The border style at the end of the inline direction is dotted (dotted).

If border-inline-style The attribute has one value:

border-inline-style: dotted;

The border style at the beginning and end of the inline direction is dotted (dotted).

CSS's border-inline-style The attribute corresponds to border-bottom-style,border-left-style,border-right-style and border-top-style The attributes are very similar, but border-inline-style The attribute depends on the inline direction.

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

Example

Example 1

Sets the border style on the inline direction:

#example1 {
  border-inline-style: solid;
}
#example2 {
  border-inline-style: dashed dotted;
}

Try it yourself

Example 2: Combined with the writing-mode attribute

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

div {
  writing-mode: vertical-rl;
  border-inline-style: dotted;
}

Try it yourself

Example 3: Combined with the direction attribute

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

div {
  direction: rtl;
  border-inline-style: solid dotted;
}

Try it yourself

CSS syntax

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Attribute value

Value	Description
none	Default value. Specifies no border.
hidden	Same as none, but different in border conflict resolution for table elements.
dotted	Specifies a dotted line border.
dashed	Specifies a dashed line border.
solid	Specifies a solid line border.
double	Specifies a double-line border.
groove	Specifies a 3D grooved border. The effect depends on the value of border-color.
ridge	Specifies a 3D raised border. The effect depends on the value of border-color.
inset	Specifies a 3D inset border. The effect depends on the value of border-color.
outset	Specifies a 3D outset border. The effect depends on the value of border-color.
initial	Sets this property to its default value. See also initial.
inherit	Inherits this property from its parent element. See also inherit.

Technical details

Default value:	none
Inheritance:	No
Animation creation:	Not supported. See also:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderInlineStyle="dotted"