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: 358
        
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