Skip to main content

A Beginner's Guide to CSS | Part Twelve - Borders in CSS

Submitted by helen on Wednesday, August 25, 2010 - 22:15; Modified on Thursday, August 18, 2016 - 11:12

Welcome to part twelve of A Beginner's Guide to CSS, entitled "Borders in CSS". As the title dictates, this chapter will cover how to use CSS to apply borders to elements.

How to draw a simple border

To begin with, we will look at applying a seamless border around an element, then we will move onto styling different edges of that border.

The border property

If you read the previous chapters in the Beginner's Guide to CSS series, you may have noticed that I dropped some CSS properties into the mix, to demonstrate how CSS works. One of those properties was the border property.

The border property is a CSS shorthand property — called such because it enables you to manipulate many properties at once. These are as follows:

border-width
the width, or thickness of the border, in pixels, ems, exes, or named width values (thin, medium and thick).
border-style
the style of the border (solid, dotted, dashed, inset, outset, ridge, groove and double)
border-color
the colour of the border in hexadecimal notation (e.g., #b705f9), colour name (e.g., purple) or rgb value (e.g., rgb(183, 5, 249)).

To use the border property, you simply pass in three values that correspond to the above properties, for example border:1px solid #666. This will create a one pixel thick solid grey border.

If you wish to remove a border from an element, you can use either border:0 or border:none.

CSS Code:


p#borderNone {
  border:0; /* OR border:none. This is hiding the border.*/
}

p#borderSolid {
  border:1px solid #000; /* This is creating a 1 pixel thick solid black border all around our element.*/
}

p#borderDotted {
  border:1px dotted #000; /* This is creating a 1 pixel thick dotted black border all around our element.*/
}

p#borderDashed {
  border:1px dashed #000; /* This is creating a 1 pixel thick dashed black border all around our element.*/
}

p#borderDouble {
  border:4px double #000; /* This is creating two borders with a 4 pixel gap in between around our element.*/
}

p#borderGroove {
  border:4px groove #000; /* This is creating a groove effect border, 4 pixels thick around our element.*/
}

p#borderInset {
  border:1px inset #000; /* This is creating a 1 pixel thick border, dark at the top and light at the bottom, all around our element.*/
}

p#borderOutset {
  border:1px outset #000; /* This is creating a 1 pixel thick border, light at the top and dark at the bottom, all around our element.*/
}

p#borderRidge {
  border:4px ridge #000; /* This is creating a rige effect border, 4 pixels thick around our element.*/
}

(X)HTML Code:


<p id="borderNone">I don't have a border (this effect can be achieved via either border:0 or border:none).</p>
<p id="borderSolid">I have a black solid 1 pixel thick border.</p>
<p id="borderDotted">I have a black dotted 1 pixel thick border.</p>
<p id="borderDashed">I have a black dashed 1 pixel thick border.</p>
<p id="borderDouble">I have a two black borders that are both 4 pixels thick.</p>
<p id="borderGroove">I have a black 3D groove effect for my border that is 4 pixels thick.</p>
<p id="borderInset">I have a black inset 1 pixel thick border.</p>
<p id="borderOutset">I have a black outset 1 pixel thick border.</p>
<p id="borderRidge">I have a black 3D ridge effect for my border that is 4 pixels thick.</p>

Result:

I don't have a border (this effect can be achieved via either border:0 or border:none).

I have a black solid 1 pixel thick border.

I have a black dotted 1 pixel thick border.

I have a black dashed 1 pixel thick border.

I have a two black borders that are both 4 pixels thick.

I have a black 3D groove effect for my border that is 4 pixels thick.

I have a black inset 1 pixel thick border.

I have a black outset 1 pixel thick border.

I have a black 3D ridge effect for my border that is 4 pixels thick.

Please note, when using double, groove and ridge, you must supply a border thickness greater than 1px or 0.27em, otherwise there won't be sufficient thickness to display the effect and a plain border will be rendered instead.

Named border widths

Here are the three named border widths in action, so you can see how they look.

CSS Code:


p#borderThin {
  border:thin solid red;
}

p#borderMedium {
  border:medium solid red;
}

p#borderThick {
  border:thick solid red;
}

(X)HTML Code:


<p id="borderThin">I have a thin solid red border.</p>
<p id="borderMedium">I have a medium solid red border.</p>
<p id="borderThick">I have a thick solid red border.</p>

Result:

I have a thin solid red border.

I have a medium solid red border.

I have a thick solid red border.

The longhand approach

For the sake of being thorough, and purely so you aware of this technique, I will show you how to use the three longhand properties mentioned above (border-width, border-style, border-color), but I would advise against using all three together. There is really no point, when border will do the exact same thing, but with less code.

CSS Code:


p#borderLonghand {
  border-width:1px;
  border-style:solid;
  border-color:#000;
}

Three lines of code to set a border? Yeah, right!

How to draw different borders around an element

When you want to create different borders around your element, or only place a border on one edge, you use the edge specific shorthand border properties:

  • border-top - applies a border to the top of an element
  • border-right applies a border to the right of an element
  • border-bottom applies a border to the bottom of an element
  • border-left applies a border to the left of an element

CSS Code:


p#borderBottomOnly {
  border-bottom:1px solid #f90544; /* This is creating a 1 pixel thick pink border below our element.*/
}

p#borderOTT {
  border-top:3px dashed #f98305;
  border-right:1px solid #f005f9;
  border-bottom:10px dotted #0daa71;
  border-left:8px dashed #2344eb;
}

(X)HTML Code:


<p id="borderBottomOnly">I have a pink 1 pixel thick border underneath me, set using border-bottom.</p>
<p id="borderOTT">I have a crazy border all around me, set using edge specific border properties.</p>

Result:

I have a pink 1 pixel thick border underneath me, set using border-bottom.

I have a crazy border all around me, set using edge specific border properties.

There is really no reason why you would use the above method when applying a border of the same thickness, style and colour all the way around en element; just use border. The above, however, comes in handy when you want to set different values for each side of your border, or when you want to show certain borders and hide others.

A note on units of measurement

The unit of measurement I used in this tutorial to set the border thickness in all the examples is pixels — which is written as px. You can use any unit barring percentages to set your border thickness; percentages will not work. I would recommend only using pixels or ems, because they produce consistent results. Or, if you don't mind how your border is rendered (thin, medium or thick is good enough for you), the the named widths. Stay away from inches and millimetres and picas and points as they are not intended for web page design.