Here's my JSFiddle: [**http://jsfiddle.net/7FFRV/1/**](http://jsfiddle.net/7FFRV/1/)

I'm trying to get the blue border to go behind the red circle's box shadow, but in front of the container. How would I do this?

HTML:

```
<div class="container">
    <div class="image"></div>
</div>

```

CSS:

```
.container {
    width: 250px;
    height: 250px;
    padding: 30px;
    background: #fbfbfb;
    border: 1px solid black;
}

.image {
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.image:after {
    content: "";
    position: absolute;
    left: -0;
    width: 150px;
    height: 150px;
    border-radius: 500px;
    border: 10px solid #0077ca;
}

```