Possible problem with rounded corners

I was experimenting with the border-radius implementation of Firefox and WebKit and ran into some problems. I checked the ccs3 specs but couldn't find anything about it, so I'll guess I'll just post this here. Again, my apologies if this problem was already raised before and is being worked on right now.

The problem occurs when elements are nested inside a container with rounded corners. The background of the container behaves well, but the nested elements are still rectangles. So when they are given a background-color, they overlap the rounded corners.

I made a very simple test page, with a horizontal navigation (4 rounded corners) and hover color on the links in the list items. Just hover over the first list item to see the undesired effect.

http://www.onderhond.com/testpages/rounded-corners.html


It would be a real shame if this behaviour would still exist when we could finally use the property, as workarounds to fix this are pretty crappy and really mess up the css.

Greets,
Niels Matthijs
Internet Architects

Received on Thursday, 30 April 2009 11:14:32 UTC