Elaine Byene Elaine Byene - 1 year ago 133
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?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download