efecto de borde css

I'm wondering if it's possible to achieve this effect only with css. As you probably noticed the image have 4 borders if you zoom in a little bit(without that bottom shadow, I don't want to use that).

img http://img265.imageshack.us/img265/192/version203.jpg

preguntado el 08 de noviembre de 11 a las 16:11

3 Respuestas

With box-shadow you can emulate multiple borders. This is exactly what you're looking for:


respondido 08 nov., 11:21

He'd still need two elements because border-radius se aplicaría a todos of the box shadows, when this example only needs one of the borders rounded. - animuson

It appears that the most outward border is already done using CSS with a simple border effect. The outermost border would be a box with a border and some padding to push the image inside. Then going down to the grey box, you could use another box with border: 3px double since the border color is the same as the background color, and adding background-clip: padding-box so that the background will not cover the white line between the double border. It also appears there would be around a 3px border radius on that box and some padding until you get to the actual image which simply has a white border around it.

A simple example of CSS:

span.imgbox {
    background: #CCC;
    background-clip: padding-box;
    border: 3px double #CCC;
    border-radius: 3px;
    display: inline-block;
    padding: 10px;
span.imgbox > img {
    border: 1px solid #FFF;

This is generally what would be involved, assuming you don't want the white box with black border as shown in the actual website view, but just the borders you want that are shown in the image itself.

respondido 08 nov., 11:21

@Alecs: I don't believe CSS can do an odd shadow like that, at least from all the examples I've ever seen with shadows and glow. - animuson

Oh, pretty bad, I'm wondering how can I add that effect because if i use it as background image I think it doesn't work because the width of the images is set by a user from back-end so I need that effect to be ok for every width of an image... - agis

you could mix box-shadow, outline, border, and padding/background-color... but this wouldn't be cross browser..

border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333; 


I think the only way is to have nested elements.

respondido 08 nov., 11:21

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.