Double borders in CSS

Question

I am creating a PHP based Javascript photo gallery from scratch

The problem is that I want to make the difference between a simple image and a photo album.

This is how simple borders of images look.

Is it possible to create facebook, for example, borders of a photo album (double borders that create the effect of several images) via css or CSS3?

PS I do not know if this will be possible with the old css standards. I mean, CSS3 can probably do this, but it won't be backward compatible. In the other hand, currently my php side is generating 100x100 pixels. I need something that will not be destroyed if I increase the size of my thumbs.

thanks in advance

Answer 1

Is this what you are looking for?

jsfiddle

HTML:

<div class="facebook-album"></div> 

CSS

 .facebook-album, .facebook-album:before { background: red; width: 100px; height: 100px; margin: 20px; border: 3px solid #FFF; box-shadow: 0 0 0 1px #999; position: relative; } .facebook-album:before { margin: 0; content: ""; position: absolute; top: -7px; left: -7px; background: white; z-index: -1; } 

Answer 2

Use a pseudo-element, for example :before or :after , for example: It turns out that most browsers do not like: earlier in images , because it is not a text element. You could still do this if you did it on an alternate element, such as a div, and set the original background of the div. Or you could try: http://jsbin.com/otivaj/edit#html,live

Answer 3

You can just take a look at the source on Facebook to understand this. This will also work:

http://jsfiddle.net/g9A6a/

Answer 4

Yes, you can definitely do this with CSS. It looks like all of your images are the same size, which will make this very simple. Just place the <img> inside the containing element with position: relative; and offsets. Both the container and the image should have a border, with the additions and offsets that you so desire. Set the width and height of the containing element based on the dimensions of the child image.

Here is a demo on jsfiddle

Answer 5

I'm not sure that you can achieve this effect simply with CSS2. If you add extra markup - this is an option, I would do something like this:

 <ul> <li><img></li> </ul> li { position: relative; border: 1px solid gray; } img { padding: 6px; border: 1px solid gray; position:absolute; top:6px; left: 6px; background-color:white; }