<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;
}
View Compiled
// 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'));
This Pen doesn't use any external CSS resources.