I'm having trouble rounding the corners of an img using CSS3:
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?
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With