How to make a CSS border with two different colors

Here is a quick way to make an HTML element have two different border colors.

Instead of using some kind of weird div overlay with hacky positioning, instead of using a background image, we have a very straightforward method to produce a standards compliant border with two unique colors!

Take a look:
[css]
outline:1px solid #f00;
border:1px solid #333;
[/css]

Just copy->paste that into your CSS class or id and use it right away!

Example

Here is a sample usage of the above idea, we have a div with two borders with different colors, some padding, and a centered margin (using auto).

We created a class named doubleColor that will hold all of the styling for our element with two different colored borders.

[css]
.doubleColor{
width:150px;
height:100px;
padding:10px;
outline:3px solid #f00;
border:3px solid #333;
margin: 0 auto 10px;
}
[/css]

And the html:
[html]
<div class="doubleColor">
I have two border colors!
</div>
[/html]

Let’s try it out – this box below will have two borders with different colors:

Please note: When viewed in IE7, this reverts to just the single border appearance using the rules of the “border” CSS property, but this will function correctly in IE8+.

There you have it! A CSS trick that let’s you use more than one color as a border for an element. That was easy!

Example 2 – border with two colors and rounded corners

Here is a different method that you can use to create a CSS border with two colors and rounded corners.

We created a class named outerColor that will hold all of the styling for the outer element color. Notice the background color for this element (#333) matches the border color of the inner content.

[css]
.outerColor{
width:150px;
height:100px;
border-radius:10px;
border:3px solid #f00;
margin: 0 auto 10px;
background:#333;
}
[/css]

We then created a class named innerColor that will hold all of the styling for the inner element color. Notice the modifications to the height and width to take into account padding and border size. Also notice the background color is white for the inner content.

[css]
.innerColor{
width:124px;
height:74px;
border-radius:10px;
border:3px solid #333;
background:#fff;
padding:10px;
}
[/css]

And the html:
[html]
<div class="outerColor">
<div class="innerColor">
I have two rounded border colors!
</div>
</div>
[/html]

Let’s try it out – this box below will have two borders with different colors and rounded corners (if your browser supports CSS3 that is!):

So now you can make a CSS border with two colors and rounded corners using border-radius. Pretty cool huh?