How to make css two borders?

Question

I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?

This is what I had but outline does not work with IE:

outline: 2px solid #36F;
border: 2px solid #390;

possible duplicate of [CSS double border (2 colors) without using outline?](http://stackoverflow.com/questions/14735569/css-double-border-2-colors-without-using-outline) — grc, Jun 16 '13 at 01:20

score 4 · Answer 1 · answered Jun 16 '13 at 01:09

4

Just use 2 divs

<div style="border: 2px solid #36F">
    <div style="border: 2px solid #390">
        Text goes here
    </div>
</div>

http://jsfiddle.net/fpCAf/

answered Jun 16 '13 at 01:09

blake305

2,196
3
23
52

score 0 · Accepted Answer · answered Jun 16 '13 at 00:58

0

This may work:

 .border
    {
        border:2px solid #36F; 
        position:relative;
        z-index:10
    }

    .border:before 
    {
        content:"";
        display:block;
        position:absolute;
        z-index:-1;
        top:2px;
        left:2px;
        right:2px;
        bottom:2px;
        border:2px solid #36F
    }

answered Jun 16 '13 at 00:58

HasanAboShally

18,459
7
30
34

thanx i can made tripple borders using the `:after` too – Muhammad Abdallah Oct 11 '13 at 07:59

score 0 · Answer 3 · answered Jun 16 '13 at 02:02

A few possibilities:

border + outline borders , IE fails .
border-image . you need to produce the image (waste of time ?) IE 9 fails
pseudo elements , fast and easy: no extra markup, image and gradient can be use.IE8 should handle it, but not the gradient
borders + box-shadow IE9 should handle it, filter for older IE is not good looking
multiple box-shadows can be drawn inside and outside, great to give depht effects on borders, it follows border-radius too.IE9 should handle it, filter for older IE is not good looking
background image and gradient IE9 fails on gradient

... Left? if you want less than IE8 : wrap 2 elements to draw 2 basic borders

How to make css two borders?

3 Answers3