css3 circular image not working

css, html

Solution

You need to set the `<img>` to `display: block` and set its `border-radius`, instead of or in addition to the parent element. Also you can use `50%` for circular elements. And remove `opacity: 0` from the image or it will be invisible. I've included a `background-image: url()` example as well, in case that is your issue.

Demo:

Output:

CSS:

.circle {
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
}
.circle img {
    border-radius: 50%;
    display: block;
}
.background-circle {
    background-image: url( 'http://lorempixel.com/200/200/cats/' );
    height: 200px;
    width: 200px;
}

HTML:

<div class="circle"><img src="http://lorempixel.com/200/200/cats/" /></div>
<div class="background-circle circle"></div>

Problem

I am trying to make a square picture circular using css 3. per request posting my entire code html ``` <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Hello</title> <link type="text/css" href="home_page.css" rel="stylesheet" /> </head> <body> <span class="image-wrap " style="display:inline-block; background:url(pic1.png);"> <img src="pic1.png" style="opacity: 0;"></span> </body> </html> ``` css:inside home_page.css ``` .image-wrap { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; } ```

Original source