border-radius + background-color == beschnittener Rand

Betrachten Sie a div mit dem border-radius, borderund background-color Angewendete CSS-Attribute:

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

Betrachten Sie nun ein ähnliches Layout, aber mit dem background-color angegeben in einem inner-div:

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

Ich bin bestürzt darüber, dass die background-color des innere <div> verdunkelt die Grenze der äußere <div>.

Dies ist ein vereinfachtes Beispiel des Problems. In Wirklichkeit verwende ich a <table> als inneres Element mit wechselnden Zeilenfarben. Und ich benutze a <div> als äußeres Element da border-radius scheint bei dem nicht zu funktionieren <table> Element. Hier ist eine jsfiddle einer Probe dieses Problems.

Hat jemand einen Lösungsvorschlag?

Versuchen overflow:hidden im Äußeren div:

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

Sie können dies beheben, indem Sie sich bewerben overflow: hidden; zum Element mit der Umrandung. Eine viel sauberere Art, denke ich.

Fügen Sie diese CSS-Regeln hinzu:

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

Siehe aktualisiert Geige.

Muss ein Tisch verwendet werden? Hier ist ein Beispiel mit DIVs: 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;
}

Fügen Sie etwas Polsterung hinzu oder machen Sie die Hintergrundfarbe auf dem äußeren Element

Wäre es akzeptabel, dem div ein wenig Polsterung zu geben? Auf diese Weise würden die Hintergrundfarben nicht in Konflikt geraten.

Sie könnten auch border-radius zum untergeordneten Element hinzufügen.

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