html - CSS3 image with round corners and a very light oval shape -

html - CSS3 image with round corners and a very light oval shape -

hello i'm looking build in css3 image round corners , lite oval shape, in pic.

not sure if it's possible , how. know how build round image or image round corners, little different.

update here i've done

.round{ background-color:red; width:100px; height:100px; border-top-left-radius: 45px 40px; border-top-right-radius: 45px 40px; border-bottom-left-radius: 45px 40px; border-bottom-right-radius: 45px 40px; }

http://jsfiddle.net/7t1z3hxf/9/

update2 here schematics of i'm trying accomplish

thanks

if perfect precision want, recommend mask-image instead of border-radius. it's much improve suited want.

to utilize illustrator-built(?) shape mask in css, export svg or png transparent bg.

this work in chrome, safari , opera, need utilize prefixed -webkit-mask-image. property in progress of beingness merged css mask-image applied svg, hence current need prefix. other browsers, may take lesser precise border-radius.

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

learn more css masking , browser support.

html css css3 css-shapes