Create a Double Border Image Effect Using CSS

By  on  

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?

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Dijit’s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

Discussion

  1. Nice effect, David! Also I like the MooTools logo on Sam’s hat.

  2. 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.

  3. 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 ;)

  4. 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;

  5. Catar4x

    I know this tip by css-globe 6 months ago.
    Use a black border and white background to have a nice effect.

  6. Ahmed

    Very slick!

  7. That is pretty nice. Never would have thought of using background and padding to create the inner grey “double” border.

  8. @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.

  9. Really cool, simple, elegant idea. Nice work.

  10. You can also use

    outline: 1px solid #000;

    to achieve the same effect.

    // Tim

  11. Иван

    Outline is not cross-browser ;)

  12. Thanks for sharing this

  13. Jose

    He intentado crearlo en la web http://www.eyaculacion-precoz.info pero no he podido, me puedes ayudar?

  14. John

    Um,


    border-style: double;

  15. You are the man. This is exactly what I needed. :) I’m trying to replace a heavy WordPress/plug-in setup with a custom display site, and this was the one thing I needed to replicate the behavior of my gallery plug-in.

    Thanks!

  16. christopher

    I love your stuff, first of all. I’ve followed for a while. I came by this in a google search though and it doesn’t really solve the problem I was looking to solve at least. I mean it’s clever and all but I can’t use this in my current situation. For example, it’s not really a double border its just colored padding… I already have padding on the element I’m trying to style so this doesn’t work for anything unless you aren’t going to use padding or unless you use a workaround.

  17. The CSS

    img.double-border { border:1px solid #ccc; padding:2px; background:#eee; }

    Copy Codeimg.double-border { border:1px solid #ccc; padding:2px; background:#eee; }

  18. much better than inline styling

  19. Ansikt

    In sane browsers and IE >= 8, you can get a triple border effect by using outline in addition to this trick.

  20. nice, love to apply that on my sites. awesome sharing!

  21. Vitor

    Wonderfull!!! :D

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!