Question

I’m having a problem with border-radius on Chrome (latest build). I have a border-radius: 10px; on the slider frame from this page: http://next.lab501.ro/

In Firefox and IE9 everything works, but not on Chrome and I can’t figure it out why, because I have other elements with border-radius that work just fine in Chrome.

Answer 1

I’ve checked using Safari’s “Web Inspector”, and your CSS is definitely being successfully applied to your container.

I think the problem is related to the contained content of an element with border-radius “breaking out” over the container’s rounded corners. See this article for more background. I believe the problem was first properly reported by Richard Rutter.

In your case, you are already using overflow: hidden on the container, and that’s not working — this may be related to the z-indexes you’ve got going, but it’s hard to tell with such a complex example.

I would try rounding the corners of the contained elements that appear to be overflowing, though. This seems to work for me on that page:

dl.slidedeck {
    border-radius: 10px; 
}

div.sd-node.sd-node-caption {
    border-radius: 10px;
}