clip-path curvness

by joepenzo

HTML

<img src="http://placehold.it/300x400">

<svg width="400px" height="500px" viewBox="0 0 400 500">
 <!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
  <defs>
   <clipPath id="myClip2" clipPathUnits="objectBoundingBox"transform="scale(0.0025 0.002)">
    <path  d="M400,488c0,6.627-5.373,12-12,12L12,480c-6.627,0-12-5.373-12-12V12C0,5.373,5.373,0,12,0h376c6.627,0,12,5.373,12,12V488z"/>
   </clipPath>
  </defs>
</svg>

CSS

img {
    max-width: 100%;
    height: auto;
-webkit-clip-path: url(#myClip2);
    	clip-path: url(#myClip2); 
}