Border-radius inset for img

HTML

<p>minimum/default</p>
<div class="block block-1">
    <img src="https://habrastorage.org/files/de4/3d9/b20/de43d9b207264e3a912588e2151640b8.png"/>
</div>

<p>radius: [30], width: 10, color: "#00719e"</p>
<div class="block block-2">
    <img src="https://habrastorage.org/files/de4/3d9/b20/de43d9b207264e3a912588e2151640b8.png"/>
</div>

<p>radius: [30,60], width: 10, color: "#00719e"</p>
<div class="block block-3">
    <img src="https://habrastorage.org/files/de4/3d9/b20/de43d9b207264e3a912588e2151640b8.png"/>
</div>

<p>radius: [30,60,25], width: 10, color: "#00719e"</p>
<div class="block block-4">
    <img src="https://habrastorage.org/files/de4/3d9/b20/de43d9b207264e3a912588e2151640b8.png"/>
</div>

<p>radius: [30,60,0,20], width: 10, color: "#00719e"</p>
<div class="block block-5">
    <img src="https://habrastorage.org/files/de4/3d9/b20/de43d9b207264e3a912588e2151640b8.png"/>
</div>

CSS

body {
	background:url(https://habrastorage.org/files/5e2/d0b/638/5e2d0b638f96477cb7d5d5932174f397.png) center top repeat;
	text-align:center;
}
.block { padding:20px; text-align:center;}
canvas { max-width:100%;}
p { padding:0; margin:0; line-height:24px; color:#fff; background:#00719e;}

JavaScript

/*
 * Border-radius Inset for images
 * https://github.com/tegArt/border-radius-inset
 * 
 * Copyright (c) 2013 Dmitry tegArt Sazonov
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 */
 
(function(e){e.fn.borderRadiusInset=function(b){b=e.extend({radius:[20],width:0,color:"#000"},b);return this.each(function(){var f,g,h,k;switch(b.radius.length){case 1:f=g=h=k=Math.abs(b.radius[0]);break;case 2:f=h=Math.abs(b.radius[0]);g=k=Math.abs(b.radius[1]);break;case 3:f=Math.abs(b.radius[0]);g=k=Math.abs(b.radius[1]);h=Math.abs(b.radius[2]);break;default:f=Math.abs(b.radius[0]),g=Math.abs(b.radius[1]),h=Math.abs(b.radius[2]),k=Math.abs(b.radius[3])}var c=e(this).width(),d=e(this).height(),
l=document.createElement("canvas");l.width=c;l.height=d;var a=l.getContext("2d");e(this).before(l);e(this).css("display","none");var m=new Image;m.src=e(this).attr("src");m.onload=function(){a.drawImage(m,0,0,c,d);0<b.width&&(a.globalCompositeOperation="source-over",a.beginPath(),a.rect(0,0,c,d),a.arc(0,0,f,0,2*Math.PI,!0),a.moveTo(c,0),a.arc(c,0,g,0,2*Math.PI,!0),a.moveTo(c,d),a.arc(c,d,h,0,2*Math.PI,!0),a.moveTo(0,d),a.arc(0,d,k,0,2*Math.PI,!0),a.strokeStyle=b.color,a.lineWidth=2*b.width,a.stroke());
a.globalCompositeOperation="destination-out";a.beginPath();a.arc(0,0,f,0,2*Math.PI,!0);a.moveTo(c,0);a.arc(c,0,g,0,2*Math.PI,!0);a.moveTo(c,d);a.arc(c,d,h,0,2*Math.PI,!0);a.moveTo(0,d);a.arc(0,d,k,0,2*Math.PI,!0);a.fill()}})}})(jQuery);



$(window).load(function(){
    
    $(".block-1 img").borderRadiusInset();
	
	$(".block-2 img").borderRadiusInset({
		radius: [30],
		width: 10,
		color: "#00719e"
	});
		
	$(".block-3 img").borderRadiusInset({
		radius: [30,60],
		width: 10,
		color: "#00719e"
	});
		
	$(".block-4 img").borderRadiusInset({
		radius: [30,60,25],
		width: 10,
		color: "#00719e"
	});
		
	$(".block-5 img").borderRadiusInset({
		radius: [30,60,0,20],
		width: 10,
		color: "#00719e"
	});
		
});