Custom Rounded Image Using CSS

Question

I want to get an image of a custom form as shown below:

#oval-shape { width: 200px; height: 100px; background: blue; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 

 <img id="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg"> 

Demo

Any thoughts if possible?

Answer 1

There is one way to "fake" this form using border :

 body { background: purple; } #oval-shape { display:block; margin: 20px auto; width: 200px; height: 200px; background: none; border-radius: 100%; box-sizing: border-box; border-bottom: 50px solid transparent; } 

 <img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape"> 

Answer 2

Use the border properties below and customize them according to your needs. A larger number means more for a circle. Hope this helps.

 #oval-shape { width: 200px; height: 100px; background: blue; border-top-left-radius:150px; border-top-right-radius:150px; border-bottom-left-radius:80px; border-bottom-right-radius:80px; } 

Answer 3

You can get the exact shape without straight edges: http://jsfiddle.net/XDLVx/339/

 #oval-shape { width: 200px; height: 100px; border-radius: 100px / 70px 70px 30px 30px; } 

Additional information: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 4

Alternative approach with built-in svg . The following example uses 2 cubic bezier curves to make the desired shape and pattern element to fill the shape with an image:

 svg{width:30%;height:auto;} 

 <svg viewbox="0 0 10 8"> <defs> <pattern id="img" patternUnits="userSpaceOnUse" width="20" height="10"> <image xlink:href="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" x="-1" y="0" width="14" height="7" /> </pattern> </defs> <path fill="url(#img)" d="M0.7 5 C1 -0.8 9 -0.8 9.3 5 C9.3 7.5 0.7 7.5 0.7 5"/> </svg> 

Answer 5

Of course ... here you go. Adjust as needed.

 #oval-shape { width: 200px; height: 100px; background: blue; border-top-left-radius: 150px; border-bottom-left-radius: 50px; border-top-right-radius: 150px; border-bottom-right-radius: 50px; } 

 <img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape"> 

Answer 6

Option 1

 #ovalshape{ -webkit-clip-path: polygon(51% 27%, 71% 36%, 91% 53%, 89% 68%, 76% 78%, 49% 85%, 16% 78%, 8% 65%, 15% 46%, 33% 33%); clip-path: polygon(51% 27%, 71% 36%, 91% 53%, 89% 68%, 76% 78%, 49% 85%, 16% 78%, 8% 65%, 15% 46%, 33% 33%); } 

Option 2: Take the image you want and cut it inside and make it transparent.

  <div style="height: 100; width: 100; overflow: hidden; background-image: url'picture.jpg';> <img src="cutout.png" style="height: 100%; width: 100%;"> </div> 

Answer 7

 #oval-shape { width: 200px; height: 100px; background: blue; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 

 <img id="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg"> 

Answer 8

 #oval-shape { width: 18%; height: 209px; background: blue; -moz-border-radius: 100px / 50px; -webkit-border-radius: 50%/* border-radius: 100px / 50px; */ border-radius: 50%; 

}

try with different heights and widths to suit your shape. I think it will work

Answer 9

like other answers, border-radius can do this:

below, with both images on top of each other and next to each other:

 img { border-radius:200px 200px 180px 180px / 190px 190px 80px 80px; vertical-align:middle; } div img { opacity:0.5 } div { background:url(http://i.stack.imgur.com/C8nGL.png); display:inline-block; padding:12px; } .dem { margin:15px; box-shadow:0 0 0 10px white; } body { background:#333; } 

 <div> <img src="http://lorempixel.com/140/100/people/9" /> </div> <img src="http://lorempixel.com/140/100/people/9" class="dem"/> <img src="http://i.stack.imgur.com/C8nGL.png" />