html - rounded - border-radius+background-color== borde recortado

css rounded corners

Question

Considere un div con los atributos de CSS de border , border y background-color aplicados:

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

Ahora considere un diseño similar pero con el background-color especificado en un div interno:

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

Estoy consternado por el hecho de que el background-color de background-color del <div> interno está oscureciendo el borde del <div> exterior .

Esta es una muestra simplificada del problema. En realidad, estoy usando una <table> como elemento interno con colores de filas alternados. Y estoy usando un <div> como el elemento externo ya que border-radius no parece funcionar en el elemento <table> . Aquí hay una jsfiddle de una muestra de este problema.

¿Alguien tiene una sugerencia para una solución?

Answer 1

¿Se debe usar una mesa? Aquí hay un ejemplo usando DIV''s: 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;
}

Answer 2

¿Sería aceptable darle un poco de espacio al div? De esa forma, los colores de fondo no entrarán en conflicto.

Answer 3

Agregue algo de relleno, o haga el color de fondo en el elemento externo

Answer 4

Agregue estas reglas de 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;
}

Ver el fiddle actualizado.

Answer 5

Probar overflow:hidden en el div externo:

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

Answer 6

Puede solucionar esto aplicando overflow: hidden; al elemento con el borde. Una manera mucho más limpia, creo.

Answer 7

También puede agregar un radio de borde al elemento hijo.

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