In this brief tutorial I will show you how to create solid double borders for images and style them however you wish.
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! :)
Ryan 21 Feb, 2008
img{
border:1px double #72a143;
padding:1px;
background:#ffeda5;
}
Agahmemnon 21 Feb, 2008
warnis 22 Feb, 2008
PinkPetrol 22 Feb, 2008
Jermayn Parker 22 Feb, 2008
cssglobe 22 Feb, 2008
Sarah 22 Feb, 2008
Tobias Bleckert 24 Feb, 2008
outline: 2px solid #72a143;
border: 1px solid #ffeda5;
Marcelo 25 Feb, 2008
PiticStyle 28 Feb, 2008
emil 29 Feb, 2008
eXanock 29 Feb, 2008
Braintrove.com 29 Feb, 2008
gerard 29 Feb, 2008
ikram_zidane 6 Mar, 2008
<blockquote>border:1px double #72a143;</blockquote>
aint it supposed to be 3px ?
Shaikh Sonny Aman 8 Mar, 2008
chears
meftahul sagor 11 Mar, 2008
Vance Bell 22 Apr, 2008
Peter Anders York 14 Jun, 2008
Great thanks!
monky 29 May, 2009
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.