CSS round images
Shore and sweet, here is how I implemented rounded corners on an image.
/* CSS round images with support for Safari and Firefox */
img {
-o-border-radius:90px;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
/* Because border-radius and border style will cause a cut-off,
use box-shadow with inset declared */
-webkit-box-shadow: 0px 0px 0px 5px #FFFFFF;
}
/* specific style for FireFox */
@-moz-document url-prefix() {
img {
border: 5px solid #FFFFFF;
}
}
Written by Frederick Polk
Related protips
2 Responses
What about using a standard 50% for the radius instead of 90px? Using a percentage rounds it to a circle no mater the dimensions and is a bit more scaleable.
over 1 year ago
·
When I found this tip I modified, it had use for pixel dimensions. If I were to re-do this, I would you percentages.
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#