html - Custom rounded shape image using CSS -
i want custom-shape image 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">
any thoughts if possible?
there 1 way can "fake" shape 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">