Elaine Byene Elaine Byene - 6 months ago 31
CSS Question

Custom-shape image using CSS

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

enter image description here

CSS:

#oval-shape {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}


HTML:

<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

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 {
  display:block;
  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">