CSS border-block-start property
Description
CSS border-block-start is a logical property that defines width, style, and color for the start side border of a block. The selection of start side depends upon the writing-mode.
The start side represents top side for the horizontal-tb writing-mode.
The start side represents right or left side for the vertical-rl or vertical-lr writing-mode respectively.
Change the direction of flow of text.
horizontal-tb vertical-lr vertical-rl
Syntax
border-block-start : border-block-start-width border-block-start-style border-block-start-color
Property values
border-block-start-width
mediumDefault
-
medium value represents medium sized border. thin ≤ medium ≤ thick
border-block-start-width: medium;
thin
-
thin value defines thin line border.
border-block-start-width: thin;
thick
-
thick value defines a thick line border.
border-block-start-width: thick;
+ve length
-
length defines the line width of border. The used units might be px, in, em, pt.
border-block-start-width: 10px;
border-block-start-style
noneDefault
-
There is no style. In this case, the color and width of border are also ignored i.e. 0px border.
border-block-start-style: none;
hidden
-
It is same as 'none' but resolve to different results for the border-collapse property in tables.
border-block-start-style: hidden;
dashed
-
The border consists of a series of square shaped dashes.
border-block-start-style: dashed;
dotted
-
The border consists of a series of round dots.
border-block-start-style: dotted;
solid
-
The border consists of a solid line.
border-block-start-style: solid;
double
-
The border consists of two lines. The total border-width equals to the two lines and space between them.
border-block-start-style: double;
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-block-start-style: ridge;
groove
-
The content seems to be going into the canvas. The half inner side of border is darker than border-block-start-color.
border-block-start-style: groove;
border-block-start-color
currentColorDefault
-
currentColor keyword represents the same color for the border as of text color.
border-block-start-color: currentColor;
color-name
-
The following demo represents skyblue color for border.
border-block-start-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-start-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-start-color: #0000ff;
Applicable to
It applies to all elements
From web4college, the free CSS digger
#CSS digger
Was this article helpful?