Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

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?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• Ryan on 21 Feb, 2008 wrote:

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

• Agahmemnon on 21 Feb, 2008 wrote:

  it not trick sorry, but this everyone can write

• warnis on 22 Feb, 2008 wrote:

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

• PinkPetrol on 22 Feb, 2008 wrote:

  Wicked!

• Jermayn Parker on 22 Feb, 2008 wrote:

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

• cssglobe on 22 Feb, 2008 wrote:

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

• Sarah on 22 Feb, 2008 wrote:

  Nice tutorial! Thanks for sharing.

• Tobias Bleckert on 24 Feb, 2008 wrote:

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

• Marcelo on 25 Feb, 2008 wrote:

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

• PiticStyle on 28 Feb, 2008 wrote:

  Little, nice and useful tutorial! Thank you :)

• emil on 29 Feb, 2008 wrote:

  this helped me a lot ! thanks

• eXanock on 29 Feb, 2008 wrote:

  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 on 29 Feb, 2008 wrote:

  Good job. Thanks for sharing this with us!

• gerard on 29 Feb, 2008 wrote:

  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 on 6 Mar, 2008 wrote:

  This is a pretty common usage of both padding and border - no tricks really.
  
  

  border:1px double #72a143;

  
  aint it supposed to be 3px ?

• Shaikh Sonny Aman on 8 Mar, 2008 wrote:

  Smart solution !!
  chears

• meftahul sagor on 11 Mar, 2008 wrote:

  Thanks to ikram_zidane. i like ur solution.

• Vance Bell on 22 Apr, 2008 wrote:

  Pretty straight-forward.