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