CSS » Double Borders

First DIV

#div1 {
border: 5px solid #494949;
background: #dddddd;
padding: 5px;
width: 50%;
height: 200px;
margin: 10px auto;
}

<div id="div1"> </div>

That produces this:

At the moment, it just looks like a plain, white-filled box with a thick black border. The magic comes in the padding; you just have to change the padding value of this box to however thick you want the inside border to be. The padding creates a space between the inside of this div and the outside of the next, thus creating a double border like effect.

Second DIV

#div2 {
background: #494949;
padding: 5px;
font: bold 1em/1.7em Tahoma, sans-serif;
color: #dddddd;
height: 180px;
}

<div id="div1">
<div id="div2">
This is a double bordered DIV.
</div>
</div>

Now, we have this:

This is a double bordered DIV. I'm going to fill up this space with some nonsense to make the text wrap. I wonder if I can find some pig latin somewhere... Ellohay. Isthay isway away oubleday orderedbay IVDAY. Oh, that really is interesting Lets try out my translator widget. "Hello! How are you?" in Dutch is apparently "Hello! Hoe bent u?". I thought it was "Hoe gaat het". And I thought "Hello" was spelt "Hallo". Hmm. Well, I don't speak Dutch very well, so I wouldn't know

A double-bordered div. Of course, you can change the colours around to whatever you like, and change the width. You don't need to specify height for either if you're using it for an element with flexible height, but if you do specify a height, the height of the second DIV must be whatever the total border width of the top and bottom is, less than the height of the first. Enjoy!

Comments

RSS feed for comments on this post. TrackBack URI

Leave A Comment

Footer