CSS - border-block Property

CSS border-block property is a shorthand property for assigning values to border-block-color, border-block-style and border-block-width in one go. The border-block-style is required parameter. If other parameters are not mentioned then default values will be used. This property depends on the direction of the block which is determined by the writing mode.

Syntax

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

Property Values

Examples of CSS Border Block Property

The following examples explain the border-block property with different values.

Setting the Width of Border

To set the width of the border, we use the border-block-width component of the border-block property. In the following example, we have used ‘thick’ and 10px width for border-block-width property.

Example

Setting the Style of Border

To set the style of the border, we use the border-block-style component of the border-block property. In the following example, we have used ‘solid’ and ‘dashed’ styles for border-block-style property.

Example

Setting the Color of Border

To set the color of the border, we use the border-block-color component of the border-block property. In the following example, we have used ‘red’ and ‘blue’ colors for border-block-color property.

Example

Setting all Values at Once

To set the values of width, style and color at once, we can simply use the border-block property by providing all the values at once. In the following example, the width has been taken as 5px, style as dashed and color as green.

Example

Setting Border Block with Writing Mode

The writing-mode in the context of border-block influences the direction of the border. By default, the border appears horizontally, however by changing the writing mode, the border’s direction can be changed

• Horizontal-tb: border appears horizontally.

• Vertical-lb: border appears vertically.

These are shown in the following example.

Example

Supported Browsers