Best way to remove CSS rounded-corner halo?

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. Here's a zoom in of the effect:

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 corne开发者_运维技巧rs 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. Here it is without the halo:

---

If you don't mind a 2 pixel discrepancy you could add...

div.content dt.top {
  position: relative;
  top: -2px;
}

But I think your solution is good, it can be improved by using the shorthand version of border radius:

http://jsfiddle.net/DAjWS/

border-radius: [topleft] [topright] [bottomright] [bottomleft]

The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), but in your case it's expected. The same thing would happen in a vector editing app if you overlapped two boxes with rounded corners. you just have to find an elegant way of covering the anti-aliasing of the bottom box.

---

I just came across the article that I mentioned in my question. It was linked to from html5boilerplate.com. Essentially, the following webkit CSS will get rid of the bleed (or halo as I called it):

-webkit-background-clip: padding-box;