<h1>With a padding of 15px</h1>
<img src="http://placekitten.com/g/300/300" class="beveled-image" alt="" />
<h1>With a padding of 5px</h1>
<img src="http://placekitten.com/g/300/300" class="beveled-image_2" alt="" />

$clr-background: lightskyblue;
$clr-border: orange;

.beveled-image__wrapper {
  display: inline-block;
  background: $clr-border;
  
  img {
      /* border: $border-width solid $clr-border; */
  }
}

.beveled-image__padder,
.beveled-image__padder_2 {
  display: inline-block;
  background: $clr-border;
}

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;
}

$('.beveled-image').wrap('<span class="beveled-image__wrapper"><span class="beveled-image__padder"></span></span>');
$('.beveled-image__padder').corner("bite 20px").parent().css('padding', '15px').corner("bite 20px");

$('.beveled-image_2').wrap('<span class="beveled-image__wrapper"><span class="beveled-image__padder_2"></span></span>');
$('.beveled-image__padder_2').corner("bite 20px").parent().css('padding', '5px').corner("bite 20px");