Winnipeg Web Design

Snazzy CSS Double Border Effect

The other day I had to create a box, with 2 different color borders around it (blue, and white).  This seems pretty easy right?  The problem is that CSS does not yet support 2 different color borders.  The following is what I wanted to create:

Welcome to Brenelz’s Web Tips!

So this has an outer border of blue, another border of white, and then a red fill. This can’t be achieved using one CSS border statement as there are two of them. Let’s start of by created the basis for our two outer borders and worry about the fill later:

<h4 style="background-color:#fff;border:1px solid #8B97A8;">Welcome to Brenelz's Web Tips!</h4>

Welcome to Brenelz’s Web Tips!

So as you can see we have our 2 outside borders in place. Now all we need to do is fill in the middle with our red fill. We do this by adding another hook (span tag) inside of the h4:

<h4 style="background-color:#fff;border:1px solid #8B97A8;">
    <span style="background-color:#AF282E;color:#fff;display:block;padding:5px;">
        Welcome to Brenelz's Web Tips!
    </span>
</h4>

Welcome to Brenelz’s Web Tips!

Now you can see that our white background / border are gone. We can now show the white border by setting a padding on the h4 and separating it from the span tag. This padding value will be the size of our border.

<h4 style="background-color:#fff;border:1px solid #8B97A8;padding:2px;">
    <span style="background-color:#AF282E;color:#fff;display:block;padding:5px;">
        Welcome to Brenelz's Web Tips!
    </span>
</h4>

Welcome to Brenelz’s Web Tips!

And you can see that this matches what we were originally going after. I know some of you might think this is the wrong way to go about this, as it is adding an extra non-semantic span tag; but really what else can you do?

I would also like to mention here that this same type of strategy is used for double backgrounds, which will be supported in CSS3, whenever it becomes the standard.

As well, please be sure to subscribe to my feed, and keep up-to-date with all my entries.

Related posts:

1. Webkit Border Radius Background Bleed
2. Spicing up a Feedburner Feed with Pure CSS
3. Lettering.js jQuery Plugin
4. Change Text Selection Color using CSS

Written by Brenley Dueck