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.

If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

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:
Code Block
Ask a Question
Download Source
Index.html
the basic HTML setup
(download full source code @ end of tutorial)
<body>
    <div id="box">
    
    </div>
</body>
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:
Code Block
Ask a Question
Download Source
Style.css
adding the styles for the ‘box’ div
#box
{
    background-color: #ffffff;
    border: 1px solid;
    height: 500px;
    margin: 180px auto 0px auto;
    position: relative;
    width: 500px;
}
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:
Code Block
Ask a Question
Download Source
Style.css
adding the styles for :before class.
#box:before
{
    content:"";
    border: 1px solid white; 
    width: 498px;
    height: 498px; 
    position: absolute;  
}
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!

If you’re looking for a really good web host, try Server Intellect - we found the setup procedure and their control panel, very easy to adapt to and their IT team is awesome!

download source files