A Brief Introduction

  Although some may not see a use for having more than one border on a CSS element, it can really be a useful tool in more than one situation. I’ve seen the effect used most often in image galleries and such, and it can really help elements on your page to stand out a bit more by giving them more depth. Today, we’ll see how to implement multiple borders in CSS using some not so common pseudo classes.

Step 1: The HTML

All we’ll need in order to learn about multiple borders is a box that we can add some styles to. Our page will have a slightly off-white background, and our box will be a more vivid white. Let’s have a look at the initial HTML setup:

That’s all we’ll need in our HTML file, let’s go ahead and dive into the CSS.

Part 2: The CSS

We’ll be using a couple of pseudo-classes that we’ve never mentioned before; :before and :after. These 2 classes will allow us to essentially “insert” content before or after the element that we apply them to. This lesser-known technique is extremely handy, and we’ll see how it can produce some subtle but cool results. First, let’s style the box so that it has the right dimensions and colors. We’ll add a height and width definition, as well as an all white background color and some positioning values. Have a look at the CSS for the ‘box’ div:

Great! Now you should see that the box we’ve created is slightly more white than the background, and at this point has only a single border surrounding it. The next step will be to add the :before and :after pseudo-classes to give the illusion of multiple borders. Have a look at the first class here:

What we’ve done here is essentially told CSS what to add before the box. By default, it basically adds an element with no styles, and expects us to style it. We’ve added an element before our ‘box’ that has no content, a white border, a height and a width declaration that is 2 pixels smaller than our ‘box’ div, and absolute positioning. What this does is create a second box inside of our div. The div ends up being inside of the box because we’ve made the height and width 2 pixels smaller, therefore shrinking it to the inside of the ‘box’ div even though we’re using the before pseudo class. If you view the page in a browser, you should be able to see the newly added border, although it is very subtle and you may have to zoom in to notice it. 
The next step would be the :after pseudo-class. This will be written exactly the same way as the :before class with the exception of the height and width declaration which, again, need to be made 2 pixels smaller than the :before class’s declarations. This will add yet another border to the inside of our ‘box’ div, making our subtle border a bit more noticeable. You can find the :after class declaration in the full source code.

A Few Last Words

Subtlety is beauty when it comes to CSS, and today’s tutorial was about subtleties. The border may not jump out and scream at you, but it is a very nice way to add a sense of depth and elegance to a normally plain rectangle. Join us next time for another round of CSS creations. See you there!

Download Source Files