-webkit-border-radius does not crop image properly

Question

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

Solution 1

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.

Solution 2

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>

Solution 3

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;   
}

Solution 4

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.

View more solutions

Comments

[StHelensBull]

That would be creating container areas for every img. I have done this to show how to correct this issue, but would like to know if -webkit-border-radius: bug is being fixed.

[StHelensBull]

I have this declared in the css: a img{ ; then with the same border radius syntax needed for rendering a border radius, but nothing seems to be working. The 3 browsers (Safari, Chrome and Opera) are the only ones that are having this issue, IE9 and Firefox 4.0 work fine.

[StHelensBull]

<a href="images/non-typical-1.jpg" title="Click to see large image" onClick="Expand('images/non-typical-1.jpg', 600, 600); return false;" rel="nofollow"><img class="nonTyp" src="images/non-typical-1.jpg" alt="Non Typical" /></a>

[StHelensBull]

I changed the all stylings in the <a> tag and still does not render properly, going to shoot a few emails to Safari and Google about this and see what they have to say, thanks to all on this issue.

[Ninjiangstar]

<a href="images/non-typical-1.jpg" title="Click to see large image" onClick="Expand('images/non-typical-1.jpg', 600, 600); return false;" rel="nofollow"><div class="nonTyp" style="background-image:url('images/non-typical-1.jpg');"></‌​div></a> you can still hyperlink containers as long as they have width and height. what do you mean by "if -webkit-border-radius: bug is being fixed."?

[StHelensBull]

I mean that when you use a -webkit-border-radius on a <img> it will not render properly in Opera, Chrome and Safari. You will notice that I have declared a class= for the image which is defined in a external stylesheet, which also declares width and height. The syntax is correct for all browsers and renders like it should in Firefox 4.0 and IE9. The only workaround that I can figure to use is creating a div container and using background-image: which will render border radius properly. -webkit-border-radius for <img> is the bug.

[StHelensBull]

good job on this workaround for this issue, your example works pretty dang good just need to set some styling issues (mainly the hot-pink border....lol), thanks a bunch!!

[Iulian Onofrei]

@Matijs, what if I want to use the position: relative on the img?

[Matijs]

@RevoltEr on its own or were you going to do something with left, right, top, bottom as well?

[Iulian Onofrei]

@Matijs, Yes, I wanted to use left position on :hover but I solved it with jQuery.

[Matijs]

@RevoltEr sounds like something you should be doing with CSS, not JavaScript. You could use an a:hover > img be better for targeting this.