Menu
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;
}
923
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: 
.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;
}
<div class="circle"><img src="http://lorempixel.com/200/200/cats/" /></div>
<div class="background-circle circle"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
