Create a Double Border Image Effect Using CSS
CSS doesn't allow for too many cross-browser compatible effects. Webkit has added some webkit- CSS effects, but I'm talking about a more toned-down, subtle effect. Did you know you can add a double-border effect to your images using basic, cross-browser CSS? Let me show you how.
The CSS
img.double-border { border:1px solid #ccc; padding:2px; background:#eee; }
You can give your image a background-color property and add padding to the image to create the double border effect. It's a simple but effective design trick. You could enhance an image's appearance during the hover effect using this "double border."
What would you use this for?
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Nice effect, David! Also I like the MooTools logo on Sam’s hat.
Yes, this is a nice way of acomplishing that effect, i use it very often just with a larger padding. On one gallery i used white background, grayish border, 5px padding and then an aditional drop shadow effect (image). So the final result turns out to be perfect.
I can think of a couple of browsers that do not support this and I ain’t gonna say they are both made by MS ;)
Can you be more specific with that ?
I tested my way in most of the browsers (IE6, 7, FF2, 3, Opera, Safari etc.) and works like a charm. Only problem i can think of (would need to test that) is maybe the default img display:inline;
I know this tip by css-globe 6 months ago.
Use a black border and white background to have a nice effect.
Very slick!
That is pretty nice. Never would have thought of using background and padding to create the inner grey “double” border.
Creare un bordo doppio per un immagine
http://moukadesign.altervista.org/css-creare-un-bordo-doppio-per-un-immagine/
@Elmas — it’s all about the right !DCOTYPE. If you manage to run IE 6 in standads mode — you will see the padding. If you do not manage, however, you will run the page in Quirks mode and not see the padding.
The easiest way to trigger Quirks mode is to add a XML prologue or add anything but white space before the DOCTYPE e.g. comment ;)
See at http://en.wikipedia.org/wiki/Quirks_mode for quick info.
Really cool, simple, elegant idea. Nice work.
You can also use
outline: 1px solid #000;
to achieve the same effect.
// Tim
Outline is not cross-browser ;)
Thanks for sharing this
He intentado crearlo en la web http://www.eyaculacion-precoz.info pero no he podido, me puedes ayudar?