Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 660
Rob Avatar asked Jul 28 '11 09:07

Rob


2 Answers

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/

like image 83
jackJoe Avatar answered Sep 23 '22 20:09

jackJoe


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.

like image 21
TheBozzMan Avatar answered Sep 22 '22 20:09

TheBozzMan