<img src="http://placekitten.com/g/300/300" 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 {
    overflow: hidden;
    position: relative;
    display: inline-block;

    .beveled-image__padder img {
        display: block;
        border: $border-width solid $clr-border;
    }

    &:before,
    &:after,
    .beveled-image__padder:before,
    .beveled-image__padder:after {
        content: '';
        background: $clr-background;
        height: $corner-size;
        width: $corner-size;
        position: absolute;
        border: $border-width solid $clr-border;
        border-radius: 100%;
    }

    &:before {
        top: -$corner-offset;
        left: -$corner-offset;
    }
    &:after {
        top: -$corner-offset;
        right: -$corner-offset;
    }
    .beveled-image__padder:before {
        bottom: -$corner-offset;
        left: -$corner-offset;
    }
    .beveled-image__padder:after {
        bottom: -$corner-offset;
        right: -$corner-offset;
    }
}

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

// Add wrapper elements with jQuery as WYSIWYG restrictions prevent more then one element being sent down the pipe
$('.beveled-image').wrap('<span class="beveled-image__wrapper"><span class="beveled-image__padder"></span></span>');
// Try to perserve any inline styles applied in the WYSIWYG
$('.beveled-image__wrapper').css('float', $('.beveled-image').css('float'));