border-radius + background-color == bordure recadrée

Considérons un div avec les atsortingbuts CSS border-radius , border et background-color appliqués:

 
Blah

entrer la description de l'image ici

Considérons maintenant une disposition similaire mais avec la background-color spécifiée dans une div interne:

 
Blah

entrer la description de l'image ici

Je suis consterné par le fait que la background-color de background-color du

interne masque la bordure du

externe .

Ceci est un exemple simplifié du problème. En réalité, j’utilise un

comme élément interne avec des couleurs de lignes alternées. Et j’utilise un

comme élément externe puisque border-radius ne semble pas fonctionner sur l’élément

. Voici un exemple d’un échantillon de ce problème.

Quelqu’un at-il une suggestion pour une solution?

Essayez le overflow:hidden dans la div externe:

 
Blah

Ajoutez ces règles CSS:

 tr:first-of-type td:first-child { border-top-left-radius: 5px; } tr:first-of-type td:last-child { border-top-right-radius: 5px; } tr:last-of-type td:first-child { border-bottom-left-radius: 5px; } tr:last-of-type td:last-child { border-bottom-right-radius: 5px; } 

Voir le violon mis à jour.

Vous pouvez résoudre ce problème en appliquant un overflow: hidden; à l’élément avec la bordure. Une façon beaucoup plus propre je pense.

Faut-il utiliser une table? Voici un exemple d’utilisation de DIV: http://jsfiddle.net/6KwGy/1/

HTML:

 

data 1

data 2

data 1

data 2

data 1

data 2

CSS:

 .container { width: 100%; } .leftHalf { float:left; width:50%; } .rightHalf { float:left; width:50%; } .row { float: left; width: 100%; } #container .row:nth-child(odd) { background-color: #EEEEEE; } #container .row:first-child { border-top: 1px solid black; border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-radius-topleft: 5px; -webkit-border-radius-topright: 5px; } #container .row:last-child { border-bottom: 1px solid black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomleft: 5px; -webkit-border-radius-bottomright: 5px; } #container .row { border-left: 1px solid black; border-right: 1px solid black; } 

Ajouter un remplissage ou faire la couleur d’arrière-plan sur l’élément externe

Serait-il acceptable de donner un peu de rembourrage au div? De cette façon, les couleurs de fond ne seraient pas en conflit.

Vous pouvez également append border-radius à l’élément enfant.

 
Blah