Atributo border-block do CSS

Página anterior border
Próxima página border-block-color

Definition and usage

border-block The attribute is a shorthand for the following attributes:

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

CSS border-block The attribute is related to border The attribute is very similar, but border-block 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 and border-block 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 styles, colors, and widths for borders on different elements in the block direction:

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

Try it yourself

Example 2: Combined with the writing-mode attribute

The positions of the starting and ending borders on the block direction are affected by writing-mode Attribute impact:

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

Try it yourself

CSS Syntax

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

Attribute value

Value	Description
border-block-width	Specifies the width of the border on the block direction. The default value is medium.
border-block-style	Specifies the style of the border on the block direction. The default value is none.
border-block-color	Specifies the color of the border on the block 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 creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.borderBlock="dashed hotpink 10px"