Michael Gearon

CSS Borders

Michael Gearon

Last updated on

CSS3 Pseudo Element

The border property allows you to specify how the border of the box representing an element should look. The border module consists of the following properties, border-color, border-style and border-width. In this post we will look at all three properties and how we can combined them into the shorthand property.

Border Style

The border-style property controls the type of border to display.

There is plenty of choice:

  • dotted – A dotted border
  • solid – A solid border
  • dashed – A dashed border
  • double – A double border
  • groove – A 3D grooved border
  • ridge – A 3D ridged border
  • inset – A 3D inset border
  • outset – A 3D outset border
  • none – Default property, no border
  • hidden – A hidden border

[codepen_embed height=”566″ theme_id=”0″ slug_hash=”GZeOQo” default_tab=”result” user=”michaelgearon”]See the Pen Border Types by Michael Gearon (@michaelgearon) on CodePen.[/codepen_embed]

Border Width

The border-width CSS property controls the width of the four borders. In order to see the thickness of a border you must first specify the border-style property.

There is three pre-defined values which are:

  • Thin
  • Medium
  • Thick

Alternatively you can set your own borders in px, pt, cm, em or any other value. You can also set different size borders for the 4 sides.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”yOwPKK” default_tab=”result” user=”michaelgearon”]See the Pen yOwPKK by Michael Gearon (@michaelgearon) on CodePen.[/codepen_embed]

Border Color

The border-color property is used to set the color of the four borders. You can set the color using rgb(a), hex or name.

Borders Shorthand Property

You can combine the border-width, border-style and border-color into one property which is border.

border: 4px dotted orange;

Further reading

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects