In this brief tutorial I will show you how to create solid double borders for images and style them however you wish.

Take a look at some demos.

We are not going to use border-style:double; As we know these are not easy to control.
Imagine a situation where you want outer border on the image to be 3px thick and green and inner border 1px thick and yellow. How would you achieve this? And further more, how would you achieve this with no additional markup?

The Trick

What we’ll do here is use css border property for outer image border and we’ll fake the inner border using combination of background and padding properties.

First we add a border property to the image and set the values

img{
	border:2px solid #72a143;
}

If we set the padding to 1px and add a yellow background,

img{
	border:2px solid #72a143;
	padding:1px;
	background:#ffeda5;
}

the image will receive another “border” inside the real one.
That’s it! 🙂

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (20 Comments)

1. Ryan
   February 21, 2008

   And if you want double double borders you would do this: img{ border:1px double #72a143; padding:1px; background:#ffeda5; }

2. Agahmemnon
   February 21, 2008

   it not trick sorry, but this everyone can write

3. warnis
   February 22, 2008

   Seems like pretty common knowledge if you know CSS. The shadow example was cool though, I've never thought of that.

4. PinkPetrol
   February 22, 2008

   Wicked!

5. Jermayn Parker
   February 22, 2008

   Nice indeed, I also wrote about this over at my website

6. cssglobe
   February 22, 2008

   Not all readers here are CSS experts, but what's more important, not everyone would think of this, like that shadow thing :)

7. Sarah
   February 22, 2008

   Nice tutorial! Thanks for sharing.

8. Tobias Bleckert
   February 24, 2008

   You could also do it with "outline". outline: 2px solid #72a143; border: 1px solid #ffeda5;

9. Marcelo
   February 25, 2008

   I've never had thought about that posibility. Great!

10. PiticStyle
    February 28, 2008

    Little, nice and useful tutorial! Thank you :)

11. emil
    February 29, 2008

    this helped me a lot ! thanks

12. eXanock
    February 29, 2008

    I agree with warnis. I think you would have gotten more page-views if you titled this tutorial "Image shadows with CSS" or something like that instead...

13. Braintrove.com
    February 29, 2008

    Good job. Thanks for sharing this with us!

14. gerard
    February 29, 2008

    It might be a fairly simple CSS technique, but soemtimes when you're working for CSS you overlook the obvious and simple answers. That's a nice technique, and so quick I found myself at the end going "That's it?"

15. ikram_zidane
    March 6, 2008

    This is a pretty common usage of both padding and border - no tricks really. <blockquote>border:1px double #72a143;</blockquote> aint it supposed to be 3px ?

16. Shaikh Sonny Aman
    March 8, 2008

    Smart solution !! chears

17. meftahul sagor
    March 11, 2008

    Thanks to ikram_zidane. i like ur solution.

18. Vance Bell
    April 22, 2008

    Pretty straight-forward.

19. Peter Anders York
    June 14, 2008

    Wow! It's works in MSIE too, not only Mozzy like my method. Great thanks!

20. monky
    May 29, 2009

    That double border trick was a gem. And not everyone can write it because not everyone as smart as you. Geez, man. And to Tobias Bleckert: "You could also do it with "outline". outline: 2px solid #72a143; border: 1px solid #ffeda5;" Sweet! I didn't even know there was a property called outline.

Sorry, the comment form is closed at this time.