-webkit-border-radius does not crop image properly

10

votes

I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.

.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;

}

If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with: Graphics Page

htmlcss

4

votes

What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.

2

votes

I think it's because it is in the foreground above the border

try using the same code you have above, but in your html:

<div class="nonTyp" style="background-image:url('image.jpg');"></div>

1

votes

This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.

1

votes

This worked for me in Chrome and Safari.

Image is top level.

div.someclass with radius 5px and div.someclass img with radius 4px.

That seems to make the corners look cleaner in Chrome and Safari.

.someclass {
  ...
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
          border-radius: 5px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
  -webkit-box-shadow: 0px 0px 5px #000; 
     -moz-box-shadow: 0px 0px 5px #000;
          box-shadow: 0px 0px 5px #000; 
}

.someclass img {
  ...
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px; 
          border-radius: 4px;   
}

0

votes

I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.

I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.

.gallery a img {
...
position:relative;
left: 2px;
}

This solution may work if you set different radius values for image and the link.

-webkit-border-radius does not crop image properly

5 Answers