CSS Borders

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
See the Pen Border Types by Michael Gearon (@michaelgearon) on CodePen.0
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.
See the Pen yOwPKK by Michael Gearon (@michaelgearon) on CodePen.0
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.
p{
border: 4px dotted orange;
}
Further reading

Written by
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.