Borders
You may define the border style, border width, and border color of an element using the CSS border properties.
I have borders on all sides.
I have a red bottom border.
I have rounded borders.
border mukvi
CSS Border Style
The type of border to be displayed is specified by the border-style attribute.
The values listed below are accepted:
- dotted – Defines a dotted border
- dashed – Defines a dashed border
- solid – Defines a solid border
- double – Defines a double border
- groove – Defines a 3D grooved border. The effect depends on the border-color value
- ridge – Defines a 3D ridged border. The effect depends on the border-color value
- inset – Defines a 3D inset border. The effect depends on the border-color value
- outset – Defines a 3D outset border. The effect depends on the border-color value
- none – Defines no border
- hidden – Defines a hidden border
For the top border, right border, bottom border, and left border, the border-style property can have one to four values.
Example
Demonstration of the different border styles:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Note: If the border-style property isn’t set, then none of the other CSS border properties—which you will discover more about in the upcoming chapters—will work at all!
