Atributo border-block-style do CSS

Página anterior border-block-start-width
Próxima página border-block-width

Definição e uso

border-block-style A propriedade configura o estilo da borda do elemento na direção do bloco.

border-block-style O valor da propriedade pode ser configurado de diferentes maneiras:

Se border-block-style A propriedade tem dois valores:

border-block-style: dashed dotted;

O estilo da borda no início do bloco é traçado
O estilo da borda no fim do bloco é pontilhado

Se border-block-style A propriedade tem um valor:

border-block-style: dashed;

O estilo da borda no início e no fim do bloco é traçado

CSS border-block-style A propriedade de borda e a propriedade CSS border-bottom-style、border-left-style、border-right-style e border-top-style Very similar, but border-block-style The attribute depends on the block direction.

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

Instance

Example 1

Set the border style in the block direction:

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

Try it yourself

Example 2: Combined with the writing-mode attribute

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

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

Try it yourself

CSS syntax

border-block-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, except when resolving border conflicts in table elements.
dotted	Specifies a dotted border.
dashed	Specifies a dashed border.
solid	Specifies a solid 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 bevel 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 raised border. The effect depends on the value of 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:	none
Inheritance:	No
Animation creation:	Not supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderBlockStyle="dotted"