3 ways to achieve rounded corners

The simplest implementation of 1:CSS

img.imgradious{-moz-border-radius:200px;/*Firefox*/-webkit-border-radius:200px;/*Safari and Chrome*/Border-radius:200px;/*Opera 10.5+, and the use of IE-CSS3 IE browser*/-o-border-radius:200px;-khtml-border-radius:200px;/*for Konqueror Browser *}

HTML code

< P > simplest implementation (Border-radius)</p><src= "Images/mm1.jpg"  width= " " " height=" 191 " class= "Imgradious">

2:svg Achieving rounded corners

<P>SVG rounded corners effect</P>   <svgwidth= " the"Height= "191">    <desc>SVG rounded corners effect</desc>    <defs>        <patternID= "Raduisimage"patternunits= "Userspaceonuse"width= " the"Height= "191">            <ImageXlink:href= "Images/mm1.jpg"x= "0"y= "0"width= " the"Height= "191" />        </pattern>    </defs>    <rectx= "0"y= "0"width= " the"Height= "191"Rx= " +"ry= "The "Fill= "url (#raduisImage)"></rect>

The realization of 3:canvas
Html

< P > Canvas for picture fillet effect </p><id= "Canvas"  Width= "  height"= "191"></canvas> 

JS Code

 //Rounded RectangleCanvasRenderingContext2D.prototype.roundRect =function(x, Y, W, H, r) {varMin_size =Math.min (W, h); if(R > Min_size/2) r = MIN_SIZE/2; //Start Drawing         This. Beginpath ();  This. moveTo (x +R, y);  This. ArcTo (x + W, y, x + W, y +h, R);  This. ArcTo (x + W, y + H, x, Y +h, R);  This. arcto (x, y +h, x, Y, R);  This. arcto (x, y, x +W, y, R);  This. Closepath (); return  This; }      //canvas elements, picture elements      varCanvas = Document.queryselector ("#canvas"), image =NewImage (), input = document.getElementById ("Radiusinput"); varContext = Canvas.getcontext ("2d"); varDraw =function(obj) {//Create a picture texture      varPattern = Context.createpattern (obj, "no-repeat"); //if you want to draw a circle, use the following code      //Context.arc (OBJ.WIDTH/2, OBJ.HEIGHT/2, Math.max (Obj.width, Obj.height)/2, 0, 2 * math.pi);      //this uses rounded rectanglesContext.roundrect (0, 0, Obj.width, Obj.height,92 * 1 | | 0); //fills a drawn circleContext.fillstyle =pattern;       Context.fill (); } image.src= "Images/mm1.jpg"; Image.onload=function() {Draw ( This);   }; 

The ultimate implementation effect

3 ways to achieve rounded corners