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>