CSS border

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:

  1. border-width: Specifies the width of the border.
  2. border-style: Specifies the style of the border.
  3. border-color: Specifies the color of the border.

Border Styles

there are many border-style property.

  1. none: No border (default).
  2. solid: A solid line.
  3. dotted: A series of dots.
  4. dashed: A series of dashes.
  5. double: Two solid lines.
  6. hidden: A hidden border.
  7. groove: A 3D grooved border.
  8. ridge: A 3D ridged border.
  9. inset: A 3D inset border.
  10. outset: A 3D outset border.

Example:-

1. border:none


<p style="border:none;">border none Example</p>

Try it Yourself

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>

Try it Yourself

border dotted Example

4. border:dashed


<p style="border:dashed;">border dashed Example</p>

Try it Yourself

border dashed Example

5. border:double


<p style="border:double;">border double Example</p>

Try it Yourself

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>

border hidden Example