CODEWITHSUNDEEP
cssrounded-corners
Rob
Rob

Reputation: 6370

CSS rounded corners on an image problem

I'm having trouble rounding the corners of an img using CSS3:

enter image description here

This is the code I'm using:

img.event-thumbimage {
    height:120px;
    width:140px;
    -webkit-box-shadow: 0px 0px 10px 0px #4d4d4d;
    -moz-box-shadow: 0px 0px 10px 0px #4d4d4d;
    box-shadow: 0px 0px 10px 0px #4d4d4d;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;  
    border-radius: 8px;
    border:solid white 3px;
    float:left;
    margin-right:25px;
    }

As you can see, the outer border is rounded but the actual img is squared off. Using CSS3 how can I round the corners on the actual image as well?

Upvotes: 8

Views: 27642

Answers (3)

TheBozzMan
TheBozzMan

Reputation: 31

A similar answer to the previous two. Use a span around the image and apply the border-radius to both.

There is a more detailed walkthrough here: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

Some browsers are starting to handle this better, but there are still instances where the square of the image shows through.

Upvotes: 3

jackJoe
jackJoe

Reputation: 11148

use two containers, both with the rounded corners (not the img), and don't forget the overflow: hidden on the inner:

example code here: http://jsfiddle.net/jackJoe/YhDXm/

Upvotes: 16

Karl Laurentius Roos
Karl Laurentius Roos

Reputation: 4399

Put a <div> around the image and apply the border-radius to that wrapper. Add overflow: hidden; and you're good to go. This is because <img> tags can't have rounded corners.

Upvotes: 1

Related Questions