CODEWITHSUNDEEP
csscolorsborder
Muhammad Abdallah
Muhammad Abdallah

Reputation: 23

How to make css two borders?

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;

Upvotes: 1

Views: 280

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105853

A few possibilities:

  1. border + outline borders , IE fails .
  2. border-image . you need to produce the image (waste of time ?) IE 9 fails
  3. pseudo elements , fast and easy: no extra markup, image and gradient can be use.IE8 should handle it, but not the gradient
  4. borders + box-shadow IE9 should handle it, filter for older IE is not good looking
  5. 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
  6. background image and gradient IE9 fails on gradient

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

Upvotes: 0

blake305
blake305

Reputation: 2236

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/

Upvotes: 4

HasanAboShally
HasanAboShally

Reputation: 18675

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
    }

Upvotes: 0

Related Questions