CSS border-block-style Property


Example

Set a style for the borders in block direction:

#example1 {
  border-block-style: solid;
}

#example2 {
  border-block-style: dashed dotted;
}
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The border-block-style property sets the style of an element's borders in the block direction.

Values for the border-block-style property can be set in different ways:

If the border-block-style property has two values:

  • border-block-style: dashed dotted;
    • border style at block start is dashed
    • border style at block end is dotted

If the border-block-style property has one value:

  • border-block-style: dashed;
    • border style at block start and end is dashed

The CSS border-block-style property is very similar to CSS properties border-bottom-style, border-left-style, border-right-style and border-top-style, but the border-block-style property is dependent on block direction.

Note: The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the border-block-style property. For pages in English, inline direction is left to right and block direction is downward.

Show demo ❯

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.borderBlockStyle="dotted" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-block-style 87.0 87.0 66.0 14.1 73.0


CSS Syntax

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

Property Values

Value Description Demo
none Default value. Specifies no border Demo ❯
hidden The same as "none", except in border conflict resolution for table elements Demo ❯
dotted Specifies a dotted border Demo ❯
dashed Specifies a dashed border Demo ❯
solid Specifies a solid border Demo ❯
double Specifies a double border Demo ❯
groove Specifies a 3D grooved border. The effect depends on the border-color value Demo ❯
rigde Specifies a 3D ridged border. The effect depends on the border-color value Demo ❯
inset Specifies a 3D inset border. The effect depends on the border-color value Demo ❯
outset Specifies a 3D outset border. The effect depends on the border-color value Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

With writing-mode property

The position of the border style at the start and end in the block direction is affected by the writing-mode property:

div {
  writing-mode: vertical-rl;
  border-block-style: dotted;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Border

CSS border property: CSS Border property

CSS border-block property: CSS Border-block property

CSS border-block-end-style property: CSS Border-block-end-style property

CSS border-block-start-style property: CSS Border-block-start-style property

CSS border-bottom-style property: CSS Border-bottom-style property

CSS border-left-style property: CSS Border-left-style property

CSS border-right-style property: CSS Border-right-style property

CSS border-top-style property: CSS Border-top-style property

CSS writing-mode property: CSS Writing-mode property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.