CSS Borders

March 13, 2008

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:

  • h2 {border-width:10px; border-style:solid}
  • p {border-top-width:thin; border-left-width:thick; border-top-style:solid; border-left-style:solid}

Display:

h2 with a 10 pixel wide border

This paragraph has a thin top border and a thick left border.

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:

  • h2 {border-color:#8dc919; border:10px; border-style:solid}
  • 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}

Display:

h2 border in green

Quite a colorful paragraph border.

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:

  • h2 {border-style:dashed; border-width:10px; border-color:#8dc919}

Display:

h2 with a 10 pixel wide dashed green border

Here's a list of all cross-browser border styles that you can use for your website:

Border styleDisplay

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:

  • h3 {border:3px solid #8dc919}

Display:

h3 with a 2 pixel wide solid green border

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:

  • h3 {border-width:3px; border-style:solid; border-color:#0f2752 #00d0ff}
  • 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}

Display:

h3 with the top and bottom border sharing a color as well as the left and right border
h4 with the left and right border sharing the same color
h5 with all 4 border sides having a different color

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:

  • h3 {border-width:1px 5px; border-style:solid; border-color:maroon}
  • 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}

Display:

h3 with the top and bottom border sharing the same width as well as the left and right border
h4 with the left and right border sharing the same width
h5 with all 4 border sides using a different width

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:

  • h3 {border:3px solid red; border-top:none}

Display:

h3 with 3 border sides sharing the same style and the fourth being hidden

Make sure to put the separate border style after the one for the whole frame so that it will be overwritten (cascading).