CSS 101 | Part Twelve - Borders in CSS

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

How to draw a simple border

To begin with, we'll look at applying the same border around an element, then we'll move onto styling different edges of the border.

The border property

If you read the previous chapters in the CSS 101 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. When dealing with the border property, these are:

• 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)).

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 them. 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 used to set the border thickness in the examples above is pixels — which is written as px. You can use any unit barring percentages to set a border's thickness — percentages will not work...but 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.