Css - Redondear esquinas de una tabla
Códigos Css
Para dar un poco mas de diseño a nuestras paginas y redondear las esquinas de las tablas podemos utilizar es estilo.css
Esta hoja de estilo solo funciona con nn6 y mozilla
Tutores.org
Mostrando Codigo - Css
EXPLICACION
Modificar entre las lineas 4 y 9 para la configuracion de los colores.
CODIGO
/* Codigo ofrecido por Tutores.org */
- <style type="text/css">
- table{
- -moz-border-radius: 15px;
- background-color : #cc0000;
- border : 1px solid #000000;
- font-family : Arial, Verdana, Helvetica, sans-serif;
- font-size : 12px;
- padding-left : 5px;
- padding-right : 5px;
- }
- </style>
- <table width="100%" border="2" cellspacing="0" cellpadding="8">
- <tr>
- <td> </td>
- </tr>
- </table>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Redondear esquinas de una tabla" href="http://www.tutores.org/codigo/717/" target="_blank">Redondear esquinas de una tabla</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Redondear esquinas de una tabla" href="http://www.tutores.org/codigo/717/" target="_blank">Redondear esquinas de una tabla</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
katrinkatrin
2
5
no me funciona este código ni por activa ni por pasiva.
lo he copiado exactaemente como viene.
que he hecho mal??? a alguien le funciona??
lo he copiado exactaemente como viene.
que he hecho mal??? a alguien le funciona??
Comentario usuario
jeanjean
2
5
Pues a mi tampoco me funciona, me parece muy rara esta propiedad -moz-border-radius
Comentario usuario
oscar
18-07-2007 14:01:05
4
5
Si, funciona perfectamente bien para los navegadores mencionados, es un pena que no funciones en IE, se puede hacer algo para que ello suceda?
Comentario usuario
Osmany
17-07-2010 19:30:19
2
5
amigos, he probado al igual que ustedes el estilo y no me funciona, le he puesto el . delante de table para que me lo reconociera mi hoja de estilo, pero nada solo sale una tabla de color rojo normal, quisera saber si en verdad esto funciona pues me parece que no...
Comentario usuario
leandroleandro
4
5
Seguramente no les sale porque usan IE.
Una pregunta, alguien sabe si se puede redondear un solo borde, digamos el superior derecho.
Igualmente es muy util este codigo
Una pregunta, alguien sabe si se puede redondear un solo borde, digamos el superior derecho.
Igualmente es muy util este codigo
Comentario usuario
marcelo
07-01-2009 19:33:34
2
5
Este código funciona bien para netscape 6+ y Firefox. No funciona en Microsoft Internet Explorer. Asi que seguramente a los que no le funcionan es porque están usando el navegador de mocosoft.
Comentario usuario
marcelo
07-01-2009 19:33:34
2
5
Es una lástima que haya que hacerle padding al contenido de la tabla para que se pueda ver el efecto, ya que parece que el borde está un nivel mas abajo que el contenido y este lo tapa.
Comentario usuario
angel luisangel luis
4
5
Acabo de ver esta página y los problemas de que habláis.
He encontrado estas direcciones sobre las esquinas redondeadas:
http://www.w3.org/TR/css3-background/#border-top-left-radius
http://lists.w3.org/Arch ives/Public/www-style/2006Jul/0022.html
http://lists.w3.org/Archives/Public/www-validator-css/2005O ct/0014.html
...
En fín, siempre es recomendable visitar el sitio http://www.w3c.org y su versión española http://www.w3c.es.
Un saludo a todos.
He encontrado estas direcciones sobre las esquinas redondeadas:
http://www.w3.org/TR/css3-background/#border-top-left-radius
http://lists.w3.org/Arch ives/Public/www-style/2006Jul/0022.html
http://lists.w3.org/Archives/Public/www-validator-css/2005O ct/0014.html
...
En fín, siempre es recomendable visitar el sitio http://www.w3c.org y su versión española http://www.w3c.es.
Un saludo a todos.
Comentario usuario
p4lm1
03-09-2007 11:54:43
5
5
a mi me funciona muy bien en mozilla.
alguien sabe alguna forma de hacerlo funcionar en IE o en Safari??
alguien sabe alguna forma de hacerlo funcionar en IE o en Safari??
Comentario usuario
roberto
15/02/2005 20.54.27
5
5
Por favor diganme que pasa que no puedo par forma a la tabla, puse el codigo que aparece para redondearla y no hace nada, solo toma los colores, y las dimensiones pero no se redondea...
Comentario usuario
roberto
15/02/2005 20.54.27
3
5
La tabla redonda me funciona en Mosila pero en el internet explorer IE, no hace nada, digenme que tengo que hacer para lograr redondear la tabla...
Comentario usuario
AkiraAkira
5
5
vamos a ver, komo ya han dicho y bien se ve arriba este codigo solo es valido para firefox. lo siguiente es que el codigo ha de amoldarlo cada uno a su web ya que no todas son iguales, ni tienen los mismo soclores ni las mismas formas. por otra parte es cierto que el codigo podria venir algo más detallado con algun comentario ya que para un usuario que no sabe lo que toca, que simplemente copia y pega y algo inutil.
Comentario usuario
dulcedulce
4
5
Definitivamente no funciona bien en IE, safari ni opera... exelente en Mozila. si alguien tiene alguna solucion para esto porfavor posteala.
Por alli arriba alguien pregunto como bordear solo los extremos que quiera ejemplo esquina superior izq y esquina inferior derecha. Solo debes colocar el codigo de esta forma
-moz-border-radius: 15px 8px 8px 15px; (EJEMPLO)
Y cambias los valores de px segun lo necesites los dos primeros son las esquinas superiores y por supuesto los otros dos modifican la forma de los inferiores. posteen lo que sepan... Compartan conocimientos. Saludos
Por alli arriba alguien pregunto como bordear solo los extremos que quiera ejemplo esquina superior izq y esquina inferior derecha. Solo debes colocar el codigo de esta forma
-moz-border-radius: 15px 8px 8px 15px; (EJEMPLO)
Y cambias los valores de px segun lo necesites los dos primeros son las esquinas superiores y por supuesto los otros dos modifican la forma de los inferiores. posteen lo que sepan... Compartan conocimientos. Saludos
Comentario usuario
ser01_1ser01_1
5
5
Corrijo, si funciona muy bien pero solo en Mozilla como ya lo han comentado. Alguien por ahí tendra el código para IE
Comentario usuario
Sin definirSin definir
3
5
Si no me equivoco, me parece que IE tiene su propio efecto de redondeado de esquinas...
Comentario usuario
Luis
03-01-2008 19:15:42
4
5
Un ejemplo con radios iguales de 27px.
Para Mozilla:
-moz-border-radius: 27px;
Para Safari & Chrome:
-webkit-border-radius: 27px;
Para IE: no es posible ya ni IE7 ni IE8 aceptan CSS3, hay que hacerlo con gráficos. Lo mismo se puede decir de los efetos de sombra.
Para Mozilla:
-moz-border-radius: 27px;
Para Safari & Chrome:
-webkit-border-radius: 27px;
Para IE: no es posible ya ni IE7 ni IE8 aceptan CSS3, hay que hacerlo con gráficos. Lo mismo se puede decir de los efetos de sombra.
Comentario usuario
bbzzitabbzzita
5
5
Pues que lastima que a algunas personas no les ha funcionado, ya que a mi si me funciono muy bien, en mozila claro, pero en IE no.
Bueno, al menos me queda mejor que como tenia los boxes de contenido antes.
Gracias por el codigo.
Bueno, al menos me queda mejor que como tenia los boxes de contenido antes.
Gracias por el codigo.
Comentario usuario
AndragairaAndragaira
2
5
Pues he decie que en Firefox funciona perfectamente. Y sí, es una pena que el IE no lo muestre.
Muchas gracias por tu código.
Muchas gracias por tu código.
Comentario usuario
Sergio InformaticaSergio Informatica
3
5
Me leyo de 100 en MF.
pero el problema es que la porqueria de IE no lo lee.
Muchas gracias!
pero el problema es que la porqueria de IE no lo lee.
Muchas gracias!
Comentario usuario
xavi
02-02-2009 18:34:47
5
5
si se puede redondear una sola esquina solamente agrega 4 valores mas:
-moz-border-radius:20px 0 0 0;
los 3 ceros que aparecen corresponden a cada esquina y se cuentan en orden de las manesillas del reloj.
asi cambiaras solamente una esquina que seria la superior izkierda.
para la superior derecha seria asi:
-moz-border-radius:0 20px 0 0;
y listo sensillo espero te sirva.
-moz-border-radius:20px 0 0 0;
los 3 ceros que aparecen corresponden a cada esquina y se cuentan en orden de las manesillas del reloj.
asi cambiaras solamente una esquina que seria la superior izkierda.
para la superior derecha seria asi:
-moz-border-radius:0 20px 0 0;
y listo sensillo espero te sirva.
Comentario usuario
pablo
27-09-2007 00:22:32
3
5
no funciona porque no tiene compatibilidad hay que agregarsela
lo que deben hacer es lo siguiente:
para que funcione en Opera y Chrome hay que agragarle -webkit- -o-, en fin quedaria asi con las compatibilidades:
<style type="text/css">
table{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
background-color : #cc0000;
border : 1px solid #000000;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 5px;
padding-right : 5px;
}
</style>
<table width="100%" border="2" cellspacing="0" cellpadding="8">
<tr>
<td> </td>
</tr>
</table>
lo que deben hacer es lo siguiente:
para que funcione en Opera y Chrome hay que agragarle -webkit- -o-, en fin quedaria asi con las compatibilidades:
<style type="text/css">
table{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
background-color : #cc0000;
border : 1px solid #000000;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 5px;
padding-right : 5px;
}
</style>
<table width="100%" border="2" cellspacing="0" cellpadding="8">
<tr>
<td> </td>
</tr>
</table>
Comentario usuario
juan carlosjuan carlos
1
5
el codigo funciona muy bien pero solo es para firefox no funciona en explorer ni chrome gracias por el aporte :)
INSERTAR COMENTARIO