CSS border-inline-end-style property

Description

CSS border-inline-end-style is a logical property that defines style for the end side of a block. The selection of end side depends upon the writing-mode.

  • The end side represents right side for the horizontal-tb writing-mode.

  • The end side represents bottom or top side for the vertical-lr or vertical-rl writing-mode respectively.

Change the direction of flow of text.

horizontal-tb vertical-lr vertical-rl

Syntax

border-inline-end-style : none | hidden | dashed | solid | dotted | double | ridge | groove | inset | outset

Property values

noneDefault

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

border-inline-end-style: none;

hidden

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

border-inline-end-style: hidden;

dashed

The border consists of a series of square shaped dashes.

border-inline-end-style: dashed;

dotted

The border consists of a series of round dots.

border-inline-end-style: dotted;

solid

The border consists of a solid line.

border-inline-end-style: solid;

double

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

border-inline-end-style: double;

ridge

The content seems to be coming out of the canvas. The half outer side of border is darker than border-block-end-color.

border-inline-end-style: ridge;

groove

The content seems to be going into the canvas. The half inner side of border is darker than border-block-end-color.

border-inline-end-style: groove;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
Check the behavior of border-inline-end-style for different values of writing mode.
×

Ctrl+D