web-dev-qa-db-fra.com

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

Considérez une div avec les attributs CSS border-radius, border et background-color appliqués:

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

enter image description here

Considérons maintenant une présentation similaire, mais avec le background-color spécifié dans une division interne:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

enter image description here

Je suis consterné par le fait que le background-color du inner<div> masque la bordure du outer<div>. 

Ceci est un exemple simplifié du problème. En réalité, j'utilise un <table> comme élément interne avec une alternance de couleurs de lignes. Et j'utilise un <div> comme élément externe, car border-radius ne semble pas fonctionner avec l'élément <table>. Voici un jsfiddle d'un échantillon de ce problème.

Quelqu'un a-t-il une suggestion pour une solution? 

htmlcssborderbackground-colorcss3
55
Kirk Woll

Essayez overflow:hidden dans la div extérieure:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

102
Dotan

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 mis à jour fiddle .

9
melhosseiny

Vous pouvez résoudre ce problème en appliquant overflow: hidden; à l'élément avec la bordure. Une manière beaucoup plus propre je pense.

3
Mark W

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

HTML:

<div id="container">
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
</div>

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;
}
2
ngen

Vous pouvez également ajouter border-radius à l'élément enfant.

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE; border-radius:10px;">
    Blah
  </div>
</div>

0
Henrique Lobato Zago

Ajoutez du rembourrage ou faites la couleur de fond sur l'élément extérieur 

0
gnur

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

0
ern