h1

Double-bordered <div>’s using CSS

May 5, 2012

Hey guys. Today I’m going to demonstrate a very simple CSS/HTML coding trick that allows you to get double-bordered boxes on your webpage, without using images, scripts, or whatever. The technique we’re going to code up today uses pure CSS(2) and (X)HTML. If you’re excited to see how the final page looks like, you can view a live demo here.

The Markup

The idea, basically, is to wrap around the main <div>, which will house the text and/or image contents, within another <div>. While we could use another element like a <p> or a <span>, I believe that would render your HTML code invalid to W3C standards, and in my personal opinion, box elements of a page should be defined solely by <div>’s.

Anyway, here’s the base markup that you should have. Take note of the two <div>’s and how they are defined here:


<html>
  <head>
    <title>CSS Double Border test</title>
  </head>
  <body>
    <div class="mainwrap">
       <div class="maindiv">
          <h1>Hello World</h1>
          <h2>A test of double-bordered &lt;div&gt;'s using only HTML markup and CSS styles</h2>
          <p>This webpage may look absolutely plain or bland to you, but that was what it was meant to be; this is nothing more than a test.
 This single webpage was made to demonstrate a simple CSS trick, wherein you could actually display double-borders on a seemingly single box
 If you will observe the source you will see that there are actually two &lt;div&gt;'s at work with their respective styles defined in the internal CSS.</p>
          <p>Feel free to use the HTML markup and CSS styles of this page for your personal learning. You can use it as reference or even copy it verbatim, so to speak.
 I won't really care.</p>
       </div>
     </div>
   </body>
</html>

The “mainwrap” class denotes the wrapper <div> while the “maindiv” class denotes the, well, main <div> that contains the actual page content.

Now that we’re done with the basic HTML markup, let’s move on the next, and fun, part.

Styling the markup

We’ll be using vanilla CSS2 for this one. No special @imports, no hard-to-understand libraries or scripts, so don’t worry about those. ๐Ÿ™‚

The idea for this part is that we assign the background that we want our actual content to have to the ย “maindiv” <div>. Meanwhile, we assign the color of our “inner” border to theย background color of the “mainwrap” <div>.

But how will that look like a border? If you think about it, we can define a small padding of 2px to the “mainwrap” <div>, which pushes the “maindiv” <div> inward, creating the appearance of a pseudo-border of sorts. ๐Ÿ™‚

Finally, we set the border style of the outer “mainwrap” <div> to the outer border we want to have. And voila, two borders for one box!

Here’s the CSS I made for the example markup above. The only thing that really matters here are the styles for .maindiv and .mainwrap. The rest are there for the aesthetic purposes of the webpage.


body {
 background-color: #AA7720;
 font-family: Calibri, Tahoma, Helvetica, Verdana, Arial, sans-serif;
 text-align: center;
 color: #201000;
 text-shadow: 1px 1px 0px #F0F0C0;
 }

 a:link, a:visited {
 color: #0040C0;
 text-decoration: none;
 }

 a:active, a:hover {
 color: #1088FF;
 text-decoration: underline;
 }

 h1, h2 {
 margin-top: 5px;
 }

 .mainwrap {
 border-top: 1px solid #502000;
 border-left: 1px solid #502000;
 border-right: 1px solid #502000;
 border-bottom: 1px solid #502000;
 background-color: #F0E090;
 padding: 2px;
 width: 800px;
 margin: 20px auto;
 }

 .maindiv {
 background-color: #EEBB20;
 width: 780px;
 padding: 10px;
 }

It generally looks good if your color choices are similar for the box. I.e., you want a vivid midtone color for the content box, a light but similarly hued color for the inner border, and a dark outer border. It pays to use HTML color mixers like the one here.

And there we go, we are done coding our double-bordered <div>. You can now copy and paste this code onto your actual webpage. ๐Ÿ˜€

Finishing touches

I added some extra <div>’s to my demo page, to show that the style is actually reusable and doesn’t need much duplicated code to get it to work. Just copy it onto your HTML/CSS file and assign the class to two related <div>’s, and it works. I encourage you to reuse and expand on this code. Let me know in the comments if it helps you. ๐Ÿ™‚

Extra credit homework: The same (and probably better) effect can be achieved using border styles and colors instead of background-colors in the CSS. Find out for yourself how. ๐Ÿ˜‰

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: