CSS Border Property

The CSS border property it’s a shorthand that sets an element’s border. You’ll be able to set the values of border-width, border-style, and border-color.

I have a 4px dashed red border


  • border-width: Sets the thickness of the border. Defaults to medium if absent.
  • border-style: Sets the style of the border. Defaults to none if absent.
  • border-color: Sets the color of the border. Defaults to currentcolor if absent.

CSS Border Style

The border-style property specifies the style of the border, and can have one of the following values:

  • 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
  • ridge – Defines a 3D ridged border
  • inset – Defines a 3D inset border
  • outset – Defines a 3D outset border
  • none – Defines no border
  • hidden – Defines a hidden border

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element’s content.
  • According to the spec, outlines don’t have to be rectangular, although they usually are.

Next steps

Try to play with our generator:

Border generator

Leave a Reply

Your email address will not be published. Required fields are marked *