Can I use a CSS (or other) technique to round the corners of an image, or do I actually have to round the corners of the image in an image editor?

2 answers

3
points
This was chosen as the best answer

You can style a div with rounded corners and simply apply the image as the background.

<div style=" width:80px; height:80px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; background-image:url('http://gravatar.com/avatar/0c5517f0ac2d435fa0927672e3d4f40b.png');">

However, this only works in browsers that support rounded corners via CSS, so actually rounding your images is always the best way of ensuring the visual output.

Answered almost 7 years ago by Gary Hepting
  • A good technic while we waiting for CSS3 support is Karate Corneres: http://www.kyleschaeffer.com/tutorials/karate-corners-easy-rounded-corners-xhtml-no-script/ Tae almost 7 years ago
  • Forgot about the whole background-image url thing. Thanks! Daniel Huckstep almost 7 years ago
-1
points

I'd go with Gary's suggestion.

Answered almost 7 years ago by Matt Lee