Best way to remove CSS rounded-corner halo?

Posted by Tauren on Stack Overflow See other posts from Stack Overflow or by Tauren
Published on 2011-01-09T02:41:10Z Indexed on 2011/01/09 2:54 UTC
Read the original article Hit count: 282

Filed under:
|
|

I'm getting a tiny rounded corner halo effect that I'd like to get rid of. In this example, look for the effect in the red circle.

I seem to recall a while back reading an article on just this problem. Anyone have a link to that article? Otherwise, any good ways to get rid of the halo?

It is being caused because the dl has all four corners rounded. This allows the bottom of the dl to be rounded. The dt sits over the dl and has its top left and top right corners rounded. But there is a slight overflow of the dl curve behind the dt curve, causing the halo.

My solution is to increase the border-radius of the dl so that it is hidden behind the dt corner. But it seems like a hack and adds a fair amount more CSS. I'm wondering if there is a better solution.

© Stack Overflow or respective owner

Related posts about css

Related posts about css3