CODEWITHSUNDEEP
cssimageborder
agis
agis

Reputation: 1851

css border effect

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

Upvotes: 2

Views: 1142

Answers (3)

animuson
animuson

Reputation: 54797

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.

Upvotes: 2

rlemon
rlemon

Reputation: 17667

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;

demo

I think the only way is to have nested elements.

Upvotes: 0

FRAGA
FRAGA

Reputation: 5158

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

http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/

Upvotes: 2

Related Questions