html - Perfect circled image turning into half an oval shape -

if have dom structure this:

<li>   <a>     <h2></h2>     <img>     <p></p>     <button></button>   </a> </li> 

and want image round, how achieve that? tried using following after looking @ this article:

.circle-box {   width: 70%;   height: 0;   margin-top: 10px;   padding-bottom: 70%;   border-radius: 50%; } 

but using no image @ because of height: 0;, if remove vertical oval image half image rounded, this:

how fix this?

this can done using border-radius . you'll have set equal height , width of image , give border-radius top , right.

demo: http://jsfiddle.net/lotusgodkk/gcu2d/728/

css:

img {         border-radius:50% 50% 0 0;     height:600px; //sample      width:600px; //sample } 

html:

<img src="http://www.lorempixel.com/600/600/sports/1/" /> 

in case of unequal width , height of image, can replace img div , set image background.

css:

 div {     width:500px;     height:500px;     border-radius:50% 50% 0 0;     background-image:url("http://www.lorempixel.com/600/400/sports/1/");     background-repeat:no-repeat;     background-size:cover; } 

demo: http://jsfiddle.net/lotusgodkk/gcu2d/729/