Custom Double Solid Borders for Images

written on:21 Feb, 2008 by Alen Grakalic

Custom Double Solid Borders for Images

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

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.

double border for images

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! :)

About the author

Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

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

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

Ryan 21 Feb, 2008

And if you want double double borders you would do this:

img{
border:1px double #72a143;
padding:1px;
background:#ffeda5;
}
Agahmemnon 21 Feb, 2008

it not trick sorry, but this everyone can write
warnis 22 Feb, 2008

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

Wicked!
Jermayn Parker 22 Feb, 2008

Nice indeed, I also wrote about this over at my website
cssglobe 22 Feb, 2008

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

Nice tutorial! Thanks for sharing.
Tobias Bleckert 24 Feb, 2008

You could also do it with "outline".

outline: 2px solid #72a143;
border: 1px solid #ffeda5;
Marcelo 25 Feb, 2008

I've never had thought about that posibility. Great!
PiticStyle 28 Feb, 2008

Little, nice and useful tutorial! Thank you :)
emil 29 Feb, 2008

this helped me a lot ! thanks
eXanock 29 Feb, 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...
Braintrove.com 29 Feb, 2008

Good job. Thanks for sharing this with us!
gerard 29 Feb, 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?"
ikram_zidane 6 Mar, 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 ?
Shaikh Sonny Aman 8 Mar, 2008

Smart solution !!
chears
meftahul sagor 11 Mar, 2008

Thanks to ikram_zidane. i like ur solution.
Vance Bell 22 Apr, 2008

Pretty straight-forward.
Peter Anders York 14 Jun, 2008

Wow! It's works in MSIE too, not only Mozzy like my method.
Great thanks!
monky 29 May, 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, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News