I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this?
.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}
Here is a screenshot of the issue: https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
See this JsFiddle
http://jsfiddle.net/z3rLa/1/
.avatar {
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
That is the way I use:
CSS:
.avatar {
display: block;
border-radius: 200px;
box-sizing: border-box;
background-color: #DDD;
border: 5px solid #cfd8dc;
}
img {
height: 200px;
width: 200px
}
HTML:
<img class="avatar" src="..">
create a new class:
.circleborder {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(URL) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
and this would be your html code:
<div class="circleborder"><img src="URL"/></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