how to create a multiple border on a img?

Question

Question by Rohit Azad

Hello fri i want to used one image. I want to multiple border in single image is possible throw css

Answer 1

At the moment it’s not possible to make more than one border in CSS. You can kind of fake having three borders by using some clever css3 shadowing techniques.

div
{
    margin: 10px;
    border: 2px solid #f00;
    box-shadow:inset 0px 0px 2px 2px #0f0, 0px 0px 2px 5px #00f;
}

But I’d just go with adding the borders to the image as this isn’t supported by IE. (Maybe IE9 supports it.)

Answer 2

Nest your <img> inside multiple container and apply border to each

<div id="b1">

    <div id="b2">

        <div id="b3">
            <img src="" />
        </div> 

    </div> 

</div>

Then apply border to each like

#b1 { border: 1px #000 solid; }
#b2 { border: 1px #f00 solid; }
#b3 { border: 1px #0f0 solid; }
img { border: 1px #00f solid; }

Use a image that has multiple border on it and using border-image property