css - tabla - redondeado de esquinas
Esquinas redondeadas en DIV con color de fondo (5)
Tengo un código que se ve así:
<div id="shell">
<div id="title">TITLE HERE</div>
<div id="content">Article Content Goes Here</div>
</div>
El div shell tiene un borde gris que quiero en las esquinas redondeadas. El problema con el que me estoy topando es que el título div tiene un fondo verde y se superpone a las esquinas redondeadas de la concha. O bien se superpone o no sobresale contra los bordes para proporcionar un aspecto fluido.
Estoy buscando una solución que sea compatible con versiones anteriores con IE 7 y 8, pero si hay una solución en HTML5 que sea simple, estaría dispuesto a perder esos navegadores.
¡Gracias!
En su #shell #title #shell radio de #shell tanto a #shell como a #title para que las esquinas nítidas de #shell no se superpongan a #shell .
Un ejemplo en vivo, http://jsfiddle.net/BXSJe/4/
#shell {
width: 500px;
height: 300px;
background: lightGrey;
-moz-border-radius: 6px;
border-radius: 6px; /* standards-compliant: (IE) */
}
#title {
background: green;
padding: 5px;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0; /* standards-compliant: (IE) */
}
Internet Explorer no era compatible con el radio de borde hasta IE9, para frustración de los desarrolladores y diseñadores. Con IE9, los pasos importantes son utilizar la etiqueta META de borde y proporcionar el radio de borde:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>
Fuente: http://davidwalsh.name/css-rounded-corners
Prefiero usar imágenes, pero IE puede hacerlo por el desagüe. Microsoft debería intensificar su juego y admitir CSS3.
Otra forma de lograr esto era configurar el div exterior para que tuviera un desbordamiento a oculto
#shell {
width:500px;
height:300px;
background:lightGrey;
border-radius: 10px 10px 10px 10px;
overflow:hidden;
}
#title {
background:green;
padding:5px;
}
Probablemente querrá redondear solo las dos esquinas superiores del div del título con el mismo radio que el div shell para que no se superpongan. El CSS3 que utilizarías es:
border-top-left-radius: XXpx
border-top-right-radius: XXpx
Para la compatibilidad con versiones anteriores de los navegadores Mozilla antiguos, también debe utilizar:
-moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx
Y para las versiones anteriores de los navegadores WebKit (Safari, principalmente), puede utilizar:
-webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx
Sin embargo, no hay nada que pueda hacer con los antiguos navegadores de Internet Explorer, que yo sepa, excepto el uso de imágenes.