Celdas con puntas redondeadas utilizando CSS

Celdas con puntas redondeadas utilizando CSS

Antes de iniciar es necesario especificar que este ejemplo funciona con Internet Explorer únicamente.

Para inicar es necesario incluir el siguiente estilo en el documento que contendrá la celda:
<style type="text/css">
<!--
body {text-align:center}
#ttt {width:396;height:1;background:D3D3D1;}
#tt {width:398;height:1;background:EFEFEF; border-right:1px solid D3D3D1;border-left:1px solid D3D3D1;}
#t {width:400;background:EFEFEF;border-right:1px solid D3D3D1; border-left:1px solid D3D3D1;padding:4;}
-->
</style>

La hoja de estilo anteriormente publicada posee 4 (cuatro) capas. Para los que recién se inician en CSS o para los que necesitan refrescar la memoria, las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo.

Para poder experimentar el resultado en nuestra página en necesario incluir las siguientes líneas en el lugar donde queramos que aparezca la celda:
<div id="ttt"><img src="blank.gif" width="1" height="1"></div>
<div id="tt"><img src="blank.gif" width="1" height="1"></div>
<div id="t" style="font-family:Verdana;font-size:x-small;color:999">Esta es una celda con puntas redondeadas realizada enteramente con hojas de estilo.</div>
<div id="tt"><img src="blank.gif" width="1" height="1"></div>
<div id="ttt"><img src="blank.gif" width="1" height="1"></div>

Debo aclarar que para su buen funcionamiento es necesario crear una imagen de 1x1 px transparente (en este ejemplo se lo llamó 'blank.gif'). Dejo a su gusto el tamaño, el grosor de los bordes y el color, el color de fondo y el texto.

Autor: Federico Elgarte
http://www.cssboulevar.com.ar/

Usuarios que han visto este tema también han visto...

- Clases, pseudoclases y pseudoelementos en css
- Separar HTML de CSS.
- Menú rollover en CSS
- Cambio de contraste con Javascript y CSS
- Cómo utilizar el Opacity con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento