CODEWITHSUNDEEP
css
10010010001011101111
10010010001011101111

Reputation: 59

css3 borders and box-shadow effects

I am not sure how but I want to make a border and with box-shadow add a second lighter layer to that border adding depth to the entire thing just like in this image.

Any suggestion as to how it can be done? Left border is what I want to achieve.

Upvotes: 0

Views: 1896

Answers (1)

matthewpavkov
matthewpavkov

Reputation: 2928

You could try something like this, using box-shadow:

body { background: #555; }
div {
    background: #666;
    border: 1px solid #393939;
    box-shadow: inset 0 0 1px #999;
    width: 200px;
    height: 150px;
    margin: 20px;
    border-radius: 4px;
}

http://jsfiddle.net/2n2RE/

Then just adjust the color values as desired. You could also change the blur amount on the box-shadow to achieve different looks.

Upvotes: 1

Related Questions