CSS border-inline property
CSS border-inline is a logical property that defines border width, style, and color for the start and end sides. It is a shorthand property of border-inline-color, border-inline-style, and border-inline-width.
The start and end sides are left and right sides respectively for horizontal-tb writing-mode.
The start and end sides are top and bottom sides respectively for vertical-* writing-mode.
Change the direction of flow of text.
horizontal-tb vertical-lr vertical-rl
border-inline : border-inline-width border-inline-style border-inline-color;
medium value represents medium sized border. thin≤medium≤thick
thin value defines thin line border.
thick value defines a thick line border.
length defines the line width of border. The used units might be px, in, em, pt.
There is no style. In this case, the color and width of top border are also ignored i.e. 0px border.
The bottom border consists of a solid line.
It is same as 'none' but resolve to different results for the border-collapse property in tables.
The bottom border consists of a series of square shaped dashes.
The bottom border consists of a series of round dots.
The bottom border consists of two lines. The total border-inline-width equals to the two lines and space between them.
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.
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.
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-bottom.
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-bottom.
currentColor keyword represents the same color for the bottom side border as of text color.
The following demo represents skyblue color for the bottom side border.
It represents rgb value of a color.
The hexadecimal value of red color for the bottom side border is given below.
It represents hexadecimal notation of red color.
The hexadecimal notation of blue color for the bottom side border is given below.
It applies to all elements
Was this article helpful?