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.

Values

• 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