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