CSS border-block-start-style Attribute

Previous Page border-block-start-color
Next Page border-block-start-width

Definition and Usage

border-block-start-style The property is used to set the border style at the beginning of the block direction of the element.

CSS border-block-start-style Property and CSS Property border-bottom-styleborder-left-styleborder-bottom-styleborder-left-style, border-right-style and border-top-style border-block-start-style Very similar, but

The property depends on the block direction.Note: writing-mode Defines the block direction. This affects the starting and ending positions of the block and related CSS properties border-block-start-style The result 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 for the border at the start of the block direction:

div {
  border-block-start-style: dotted;
}

Try it yourself

Example 2: Combined with the writing-mode property

The position of the border style at the start of the block direction is affected by writing-mode Property effect:

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

Try it yourself

CSS syntax

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

Property value

Value	Description
none	Default value. Specifies no border.
hidden	Same as "none", but differs 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 groove border. The effect depends on the value of border-color.
ridge	Specifies a 3D ridge 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.borderBlockStartStyle="dotted"