¿La mejor manera de eliminar el halo de esquina redondeada de CSS?

Question

me estoy haciendo una pequeña esquina redondeada de halo efecto que me gustaría deshacerse de él. En this example, busca el efecto en el círculo rojo. He aquí un zoom del efecto:

Me parece recordar un tiempo de leer un artículo sobre este problema solo. ¿Alguien tiene un enlace a ese artículo? De lo contrario, alguna buena forma de deshacerse del halo?

Es ser causado porque el dl tiene las cuatro esquinas redondeadas. Esto permite redondear la parte inferior de dl. El dt se sienta sobre el dl y tiene su top left y top right esquinas redondeadas. Pero hay un ligero desbordamiento de la curva dl detrás de la curva dt, que causa el halo.

My solution es aumentar el radio del dl para que se oculte detrás de la esquina dt. Pero parece un truco y agrega una buena cantidad de CSS. Me pregunto si hay una mejor solución. Aquí es sin el halo:

Answer 1

Si no les importa una discrepancia de 2 píxeles se podría añadir ...

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

Pero creo que la solución es buena, puede ser mejorado mediante el uso de la versión abreviada de radio de borde:

http://jsfiddle.net/DAjWS/

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

El artículo que está mencionando probablemente tiene que ver con la combinación de la frontera con la frontera de radio (que produce un halo similar a la suya), pero en su caso se espera. Lo mismo sucedería en una aplicación de edición de vectores si superpones dos cajas con esquinas redondeadas. solo tiene que encontrar una manera elegante de cubrir el suavizado de la caja inferior.

Answer 2

me encontré con the article that I mentioned in my question. Se vinculó desde html5boilerplate.com. En esencia, el siguiente CSS WebKit se librará de la purga (o halo tal como lo he llamado):

-webkit-background-clip: padding-box;