CSS3 image with round corners and a very light oval shape

Question

Hello I\'m looking to build in CSS3 an image with round corners and a very light oval shape, like in this pic.

Not sure if it\'s possible and how. I know how to buil

Answer 1

If I understood right you want something like this.

HTML:

<DIV CLASS="TEST"></DIV>

CSS:

.TEST{
   width:230px;
   height:240px;
   background-image:url(IMAGE.JPG);
   border-radius:100px;
   background-position:center center;
   background-size::230px 240px;
 }

You may change the values to get the desired position.

Answer 2

If perfect precision is what you want, I recommend mask-image instead of border-radius. It's much better suited for what you want.

To use your Illustrator-built(?) shape as a mask in CSS, export it as SVG or PNG with transparent bg.

This will work in Chrome, Safari and Opera, but you need to use the prefixed -webkit-mask-image. The property is in progress of being merged with CSS mask-image which only applied to SVG, hence the current need for a prefix. For other browsers, you may choose the lesser precise border-radius.

.round{
 -webkit-mask-image: url(yourshape.png);
 -webkit-mask-size: contain;
 -webkit-mask-position: center center;
 /* ... border-radius as fallback */
}

Learn more about CSS Masking and browser support.

Answer 3

Adapted from Here

If it's note exactly what you are looking for, I can mess with the border radii and round it or flatten it.

#round {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px 0;
  background: orange;
  border-radius: 48% / 25%;
  color: white;
}
#round:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 11%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 21% / 68%;
}

<div id="round"></div>