html - Custom rounded shape image using CSS -


i want custom-shape image shown here:

rounded image

#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?

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


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo