<div class="content-wrapper">
  <h1 class="title title--alpha">CSS corner borders</h1>
  <p>Using only CSS to create borders that wrap around the corners of an element.</p>
  <div class="images">
<div class="images__img-wrapper">
  <img src="http://heyvian.com/images/kristie-landscape.jpg" alt="Fashtion portait of girl in sunglasses by Vian Esterhuizen">
</div>

<div class="images__img-wrapper">
  <img src="http://heyvian.com/images/kristie-portrait.jpg" alt="Fashtion portait of girl in sunglasses by Vian Esterhuizen">
</div>
  </div>
</div>

*{
  box-sizing:border-box;
}

$font: Raleway, sans-serif;
$background-color: #fff;

body{
  padding:30px;
  background-color:$background-color;
}

.content-wrapper{
  width:802px;
  margin:0 auto;
}

.title{
  font-family: $font;
  text-transform:uppercase;
  letter-spacing:0.3em;
}

.title--alpha{
  font-size:1.8em;
  margin:0 0 25px;
  padding:0;
  color:#333;
}

.content-wrapper .title--alpha{
  text-align:center;
}

.content-wrapper .title--alpha::after{
  content:'';
  display: block;
  width:40%;
  height:0;
  margin:15px auto 0;
  border-bottom:1px solid #eee;
}

p{
  font-family:$font;
  margin:0 0 25px;
  padding:0;
  color:#333;
}

.images{
  text-align:center;
}

.images__img-wrapper{
  position: relative;
  display: inline-block;
  width:auto;  
  margin:0 auto 50px;
  padding:25px;
  border:1px solid #eee;
}

.images__img-wrapper::before,
.images__img-wrapper::after {
    content:'';
    position: absolute;
    background: $background-color;
}

.images__img-wrapper::before {
    width:calc(100% + 50px + 2px - 120px);
    height:calc(100% + 2px);
    top:-1px;
    left:50%;
    transform:translateX(-50%);
    z-index: 1; 
  
}

.images__img-wrapper::after {
    height:calc(100% + 50px + 2px - 120px); 
    width:calc(100% + 2px);
    left:-1px;
    top:50%;
    transform:translateY(-50%);
    z-index: 1;
}

.images__img-wrapper img{
  position:relative;
  display:block;
  margin:0;
  padding:0;
  z-index:5;
}

/*** DEMO STUFF ***/
.images__img-wrapper:hover{
  border-color:red;
  cursor:help;
}

.images__img-wrapper:hover::before,
.images__img-wrapper:hover::after{
  background-color:rgba(0,0,0,.3);
}