Border Property specify border width, style, colour of a border .With the help of border , styling will be applying on the content.
Border style: To make a border around an element, you need to use border style. The value of the border style is solid, dotted, dashed, grove, ridge.
1.Solid: this is a by default style of border.
2.Dotted: Specify a dotted border.
3.Dashed: Specify a dotted border.
4.Double: Specify a double border.
Border width: It specify a width of the border. You can provide a width value in pixels or also there is a some value of border width like:medium, thin, thick.
1.Medium: Specifies a medium border.This is a default value.
2.Thin: Specify a thin border.
3.Thick: Specify a thick border.
Border colour: This property apply a color in the border. The colour of the border can also be specified using a hexadecimal value.
Inherit: The Inherit keyword specify that a property should inherits its value from its parent element.
Initial: The Initial keyword is used to set a CSS Property to its default value.
Border properties
Ist method:
These properties style, width, colour can be apply on any area like top, bottom, left, right.
1.border-top-style:dotted, dashed, double, groove, ridge etc
2.border-top-style:dotted; border-top-color:#F332D6; border-top-width:2px;
3.border-left-style: dashed; border-left-color:#F332D6;border-left-width:2px;
4.border-top-style: groove; border-top-color:#F332D6;border-top-width:2px;
5.border-right-style:dotted; border-right-color:#F332D6;border-right-width:2px;
In the first method, you need to use these lengthy code for styling. For each side of border, you have to write different line code for width, style, color etc.
2nd method:
5.border-bottom:2px solid green;
6.border-right:2px dotted red;
7.border-left:2px dashed blue;
8.border-top:2px solid #34F911;
In second method, code complexity will be reduce. Here, you just only write one line code. In this one line code width, style, colour will be mentioned. But If you want to apply this style at any particular direction then need to mentioned top, bottom, left, right.
3rd method:
9.border:2px dotted red;
In third method, this one line code will apply the effect on all side of border. It will cover all side like top, bottom, left, right of the border.
Example:
Border properties
Inherit Border Example:
Initial Border Example: