CSS border-block property

Description

CSS border-block is a logical property that defines border width, style, and color for the start and end sides. The selection of start and end sides depends upon the writing-mode.

  • The start and end sides are top and bottom sides respectively for horizontal-tb writing-mode.

  • The start and end sides are left and right sides respectively for vertical-* writing-mode.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

Syntax

border-block : border-block-width    border-block-style    border-block-color;

Property values

border-block-width

mediumDefault

medium value represents medium sized border. thin≤medium≤thick

border-block-width: medium;

thin

thin value defines thin line border.

border-block-width: thin;

thick

thick value defines a thick line border.

border-block-width: thick;

+ve length

length defines the line width of border. The used units might be px, in, em, pt.

border-block-width: 10px;

border-block-style

noneDefault

There is no style. In this case, the color and width of border are also ignored i.e. 0px border.

border-block-style: none;

solid

The border consists of a solid line.

border-block-style: solid;

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

border-block-style: hidden;

dashed

The border consists of a series of square shaped dashes.

border-block-style: dashed;

dotted

The border consists of a series of round dots.

border-block-style: dotted;

double

The border consists of two lines. The total border-block-width equals to the two lines and space between them.

border-block-style: double;

ridge

The content seems to be coming out of the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The outer side of the bottom border is darker than the inner side of the bottom border.

border-block-style: ridge;

groove

The content seems to be going into the canvas. It is obtained by producing the box-shadow from the two colors that are lighter and darker than the border-color.

The inner side of the bottom border is darker than the outer side of the bottom border.

border-block-style: groove;

inset

The color of top and left borders is darker than border-color but the color of right and bottom borders is the same as border-color.

The effect of inset value can be observed in border.

border-block-style: inset;

outset

The color of top and left sides is the same as border-left but the color of right and bottom sides is darker than border-color.

The effect of outset value can be observed in border.

border-block-style: outset;

border-color

currentColorDefault

currentColor keyword represents the same color for the border as of text color.

border-block-color: currentColor;

color-name

The following demo represents skyblue color for the border.

border-block-color: skyblue;

rgb value

It represents rgb value of a color.

The hexadecimal value of red color for the border is given below.

border-block-color: rgb(255,0,0);

hexadecimal value

It represents hexadecimal notation of red color.

The hexadecimal notation of blue color for the border is given below.

border-block-color: #0000ff;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
border-block: border-block-start border-block-end;
▾
×

Ctrl+D