Last Updated: February 25, 2016
·
1.226K
· oneblackcrayon

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;
    }
}

2 Responses
Add your response

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 ·