The border property in CSS is used to set the border around an element. You can specify the border’s width, style, and color. The border property is a shorthand that combines these individual properties:
- border-width: Specifies the width of the border.
- border-style: Specifies the style of the border.
- border-color: Specifies the color of the border.
Border Styles
there are many border-style property.
- none: No border (default).
- solid: A solid line.
- dotted: A series of dots.
- dashed: A series of dashes.
- double: Two solid lines.
- hidden: A hidden border.
- groove: A 3D grooved border.
- ridge: A 3D ridged border.
- inset: A 3D inset border.
- outset: A 3D outset border.
Example:-
1. border:none
<p style="border:none;">border none Example</p>
border none Example
2. border:solid
<p style="border:solid;">border solid Example</p>
border solid Example
3. border:dotted
<p style="border:dotted;">Dotted Example</p>
border dotted Example
4. border:dashed
<p style="border:dashed;">border dashed Example</p>
border dashed Example
5. border:double
<p style="border:double;">border double Example</p>
border double Example
6. border:groove
<p style="border:groove;">border groove Example</p>
border groove Example
7. border:ridge
<p style="border:ridge;">border ridge Example</p>
border ridge Example
8. border:inset
<p style="border:inset;">border inset Example</p>
border inset Example
9. border:outset
<p style="border:outset;">border outset Example</p>
border outset Example
10. border:hidden
<p style="border:hidden;">border hidden Example</p>