Before and After plus radius

by Chris LaFrombois

HTML

<div class="before">
    <img src="http://placehold.it/300x500" />
</div>

<div class="circle">
   
</div>

CSS

div.before {
    width:300px;
    height:500px;
    background-color:red;
    position:relative;
}

div.before:before {
    content:'';
    display:block;
    width:280px;
    height:480px;
    border:white solid 1px;
    position:absolute;
    margin:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

div.circle {
    width:285px;
    height:285px;
    background:red;
    border-radius:142px;
    -webkit-border-radius: 142px;
    -moz-border-radius: 142px;
}