Propriedade border-block-end do CSS

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

Course recommendation:

border-block-end The properties are the shorthand forms of the following attributes:

CSS border-block-end Definition and usage properties are the shorthand forms of the following CSS properties:border-leftborder-bottomborder-left, border-right and border-top border-block-end The attributes are very similar, but

The attribute 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-end 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 width, color, and style for the border at the end of the block direction:

div {
  border-block-end: 10px solid pink;
}

Try it yourself

Example 2: Combined with the writing-mode attribute

The position of the border at the end of the block direction is affected by writing-mode The impact of the attribute:

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

Try it yourself

CSS syntax

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

Attribute value

Value	Description
border-block-end-width	Specifies the border width at the end of the block direction for the element. The default value is "medium".
border-block-end-style	Specifies the border style at the end of the block direction for the element. The default value is "none".
border-block-end-color	Specifies the border color at the end of the block direction for the element. The default value is the current color of the border.
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 currentcolor
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderBlockEnd="pink dotted 5px"