Web4College

CSS border-inline-start-style property

src

Description

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

  • The start side represents left side for the horizontal-tb writing-mode.

  • The start side represents top or bottom 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-start-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-start-style: none;
Try it

hidden

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

border-inline-start-style: hidden;
Try it

dashed

The border consists of a series of square shaped dashes.

border-inline-start-style: dashed;
Try it

dotted

The border consists of a series of round dots.

border-inline-start-style: dotted;
Try it

solid

The border consists of a solid line.

border-inline-start-style: solid;
Try it

double

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

border-inline-start-style: double;
Try it

ridge

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

border-inline-start-style: ridge;
Try it

groove

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

border-inline-start-style: groove;
Try it

Applicable to

It applies to all elements