CSS borders
With CSS it's possible to apply a border around almost any HTML element. You can tweak the thickness, color and even add a fancy line style for the border as a whole or for each of the 4 sides individually using border-top, border-left, border-bottom and border-right. Border properties are not inherited from parent elements and must be set explicitly every time.
Border width
By default all elements have a border-width of 0. You can change it to any length value or use one of the pre-defined values thin, medium and thick.
CSS border-width
p {border-top-width:thin; border-left-width:thick; border-top-style:solid; border-left-style:solid}
<p>This paragraph has a thin top border and a thick left border.</p>
Output
Note: You must define both a border width and border style in order for it to show up. Border styles will be discussed further down the page.
Border color
To make those black borders less boring we can add some CSS color using either border-color for the whole frame or border-top-color etc. to specify a single side.
CSS border-color
p {border-top-color:#ff7612; border-left-color:#39c; border-top-width:thin; border-left-width:thick; border-top-style:solid; border-left-style:solid}
<p>Quite a colorful paragraph border.</p>
Output
Border style
Another way of customizing your border is to set one of the pre-defined border styles for the border-style or border-style-top etc. property.
CSS border-style
Output
Here's a list of all cross-browser border styles that you can use for your website:
| Border style | Display |
|---|---|
| solid |
Solid border style
|
| dotted |
Dotted border style
|
| dashed |
Dashed border style
|
| double |
Double border style
|
| groove |
Groove border style
|
| ridge |
Ridge border style
|
| inset |
Inset border style
|
| outset |
Outset border style
|
| none |
No border style
|
None is the default border style and hides any border.
Shorthand notations for borders
Specifying all these border properties can be tedious and produces quite a lot of code. Fortunately there exist shorthand notations to make it a lot shorter. Use these whenever possible.
All-in-one border
With the border property you can pack all the border styles into one rule:
CSS border
Output
The first value is the width, the second is the border style and the third optional value is the color.
Multiple border colors
To specify multiple colors you can add more than one value to the border-color property:
CSS shorthand border-color
h4 {border-width:3px; border-style:solid; border-color:#ff1337 #fff400 #37d21d}
h5 {border-width:3px; border-style:solid; border-color:#47005a #7216a0 #6a7eff #6bd3ea}
<h4>h4 with the left and right border sharing the same color</h4>
<h5>h5 with all 4 border sides having a different color</h5>
Output
And this is how it works:
- 2 color values: The top and bottom border use the first value while the left and right one use the second value.
- 3 color values: The top border uses the first value, the left and right border share the second value and the bottom border uses the third one.
- 4 color values: Each border side uses its own color starting from the top border, then right, bottom and left.
Multiple border widths
The same trick can be applied to the border-width property to specify multiple widths:
CSS shorthand border-width
h4 {border-width:1px 5px 10px; border-style:solid; border-color:olive}
h5 {border-width:1px 5px 10px 15px; border-style:solid; border-color:aqua}
<h4>h4 with the left and right border sharing the same width</h4>
<h5>h5 with all 4 border sides using a different width</h5>
Output
One border side different
If you want to have 3 border sides with the same style and 1 side with another style it's shorter to first set the style of the 3 sides for the whole frame and then add the one for the remaining side.
CSS one border side different
Output
Make sure to put the separate border style after the one for the whole frame so that it will be overwritten (cascading).