Custom rounded shape image using CSS

Question

I want to get a custom-shape image as shown here:

 #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 this is even possible?

Answer 1

There is one way you can "fake" this shape with 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 below border properties and adjust as per your needs. More number means more towards circle. Hope it 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 indeed get that exact shape with no straight edges: http://jsfiddle.net/XDLVx/339/

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

More info: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 4

Alternative approach with an inline svg . The following example uses 2 cubic bezier curves to make the desired shape and the pattern element to fill the shape with the 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

Sure...here you go. Adjust as required.

 #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 out the inside and make 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 height and width according to you shape. I think this will work

Answer 9

as others answers , border-radius can do it:

demo below, with both image on top of each others and side by side:

 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" />