Edit on
<img src="http://placekitten.com/g/400/500" class="beveled-image" alt="" />
$clr-background: lightskyblue;
$clr-border: orange;
$border-width: 4px;
$corner-size: 4.1rem;
$corner-offset: $corner-size / 2;

.beveled-image__wrapper {
  display: inline-block;
  position: relative;

  img {
    display: block;
    border: 3px solid $clr-border;
  }
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:1;
    
    background: -moz-radial-gradient(2rem 2rem, circle, $clr-background 2rem, rgba(255, 255, 255, 0) 0) -2rem -2rem;
    background: -ms-radial-gradient(2rem 2rem, circle, $clr-background 2rem, rgba(255, 255, 255, 0) 0) -2rem -2rem;
    background: -webkit-radial-gradient(2rem 2rem, circle, $clr-background 2rem, rgba(255, 255, 255, 0) 0) -2rem -2rem;
    background: radial-gradient(2rem 2rem, circle, $clr-background 2rem, rgba(255, 255, 255, 0) 0) -2rem -2rem;
  }
}

body {
  background: $clr-background;
  padding: 4rem;
  text-align: center;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
View Compiled
$('.beveled-image').wrap('<span class="beveled-image__wrapper"></span>');
Rerun