Elaine Byene Elaine Byene - 8 months ago 68
CSS Question

Custom-shape image using CSS

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

enter image description 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 this is even possible?


There is one way you can "fake" this shape with border:

Warning : Since this use border to fake the shape the color must be the same as the background, then you can't use img as background for the container of the element.

body {
  background: purple;
#oval-shape {
  margin: 20px auto;
  width: 200px;
  height: 200px;
  background: blue;
  border-radius: 100%;
  box-sizing: border-box;
  border-bottom: 50px solid purple;
<img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape">