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:

outline:1px solid #f00;
border:1px solid #333;

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.

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

And the html:

<div class="doubleColor">
I have two border colors!
</div>

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

I have two border 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.

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

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.

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

And the html:

<div class="outerColor">
    <div class="innerColor">
         I have two rounded border colors!
    </div>
</div>

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!):

I have two rounded border colors!

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

Related Posts
  • http://www.high-flying.co.uk Jeremy

    Just what I’ve been looking for, thanks very much.

    • http://electrokami.com/author/camsjams/ Cameron

      Glad this helped you out Jeremy!

  • stacey

    Very Helpful!!! Is there a way to make the outline rounded? Probably too much to ask. I have my div with a border & I wanted my border to have an outline, so good news on that now. The div holds an image & needs to grow or contract based on the image size. This boarder & outline act as a frame, just what I needed but the boarder looks better when the outline has rounded corners, any ideas? thank you!!

    • http://electrokami.com/author/camsjams/ Cameron

      Good question Stacey – while you can use the new CSS property “border-radius” to give the inner border a rounded corner, it will not apply to the outline.

      I will mess around with this and see if I can figure out a good solution that will allow the outer border to be rounded too.

    • http://electrokami.com/author/camsjams/ Cameron

      I have a solution that, while not quite as elegant, will produce the effect that you are looking for. Please check back soon for the update with the solution.

      • http://electrokami.com/author/camsjams/ Cameron

        Ok Stacey, I have updated the post with an alternate method that will allow you to use two different CSS border colors and also have rounder corners using the border-radius property.

        Enjoy!

  • cheapg

    Thank you for this solution – that’s all I can say. you’ve covered so many bases.Thanks!

  • Jack

    Thanks. This saved me a lot of time.

    • camsjams

      no problem!

  • Hai Nusantara

    hy , thank you for your article..