CODEWITHSUNDEEP
htmlcss
mousesports
mousesports

Reputation: 499

Apply border on box shadow

Is there a way to apply a border onto the box shadow itself without having to create two individual divs?

Trying to create something like this:

Upvotes: 0

Views: 97

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

This is how I would go about it with pseudo elements so you don't have to add anymore html.

HTML

<div class="box">

</div>

CSS

.box {
    width: 300px;
    height: 80px;
    background: black;
    position: relative;
}

.box:after {
    content: "";
    display: block;
    width: 300px;
    height: 80px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid black;
}

Finally a fiddle: Demo

Here is a fiddle with a box-shadow on it: Demo or Demo

Upvotes: 4

Jordan Foreman
Jordan Foreman

Reputation: 3888

You can use multiple box shadows like so:

http://jsfiddle.net/chriscoyier/Vm9aM/

img {

box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);
}

Upvotes: 2

Related Questions