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