Question

Rounded corners on my jQuery sliders only work in Firefox.

Renders correctly in Firefox 17.0.1 (see image below)

Not rendering correctly in Safari Version 6.0.2 (8536.26.17) (see image below)

Not rendering correctly in Chrome Version 23.0.1271.101 (see image below)

Here is the jsfiddle build: http://jsfiddle.net/plasticmonument/TCVH5/1/ (note, I only gave full path url’s to the slider images, everything else will be missing)

My HTML:

enter code here

My CSS:

.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}

#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}

Answer 1

My guess is that it’s the old “foreground images aren’t clipped” bug.

In some browsers, a border radius may be applied, but foreground images of the elements with border-radius aren’t restrained by the radius.

I was under the impression that this was something that had been dealt with by the major browsers, but it’s not something I’ve looked into for a while, so I may be mistaken in that. It certainly looks like it’s what you’re seeing. I remember it was quite a big issue back in the days of Firefox 3.x, but if I recall correctly, the FF team sorted it out somewhere between v4 and v8.

To prove it, add an actual border (eg border:solid black 2px;) to the element, and see what happens. If the border disappears under the image at the corners as it follows the radius, then this is the bug you’re seeing.

If this is the problem, then the solutions are:

1. Use a background image instead; this won’t be clipped.
2. Add an additional layer of markup — eg a <div> with the existing <img> inside it, and put the border radius on the <div> instead of the <img>.
3. Ignore it, and wait for browser vendors to fix the issue.