Esquinas de tabla redondeadas solo CSS

He buscado y buscado, pero no he podido encontrar una solución para mi requerimiento.

Tengo una tabla HTML simple. Quiero redondear las esquinas, sin usar imágenes o JS, es decir, solo CSS puro . Me gusta esto:

Esquinas redondeadas para las celdas de las esquinas y 1pxborde grueso para las celdas.

Hasta ahora tengo esto:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Pero eso me deja sin fronteras para las células. Si agrego bordes, ¡no están redondeados!

¿Alguna solución?

Parece funcionar bien en FF y Chrome (no he probado ningún otro) con bordes separados: http://jsfiddle.net/7veZQ/3/

Editar: Aquí hay una implementación relativamente limpia de su boceto:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Para mí, la solución Bootstrap de Twitter se ve bien. Excluye IE <9 (sin esquinas redondeadas en IE 8 y versiones inferiores), pero creo que está bien, si desarrolla Web-Apps prospectivas.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Puedes jugar con eso aquí (en jsFiddle)

En primer lugar, necesitará algo más que -moz-border-radiussi desea admitir todos los navegadores. Debe especificar todas las variantes, incluidas las simples border-radius, de la siguiente manera:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

En segundo lugar, para responder directamente a su pregunta, en border-radiusrealidad no muestra un borde; simplemente establece el aspecto de las esquinas del borde, si lo hay.

Para activar el borde, y así obtener sus esquinas redondeadas, también necesita el borderatributo en sus elementos tdy th.

td, th {
   border:solid black 1px;
}

También verá las esquinas redondeadas si tiene un color de fondo (o gráfico), aunque, por supuesto, debería ser un color de fondo diferente al del elemento circundante para que las esquinas redondeadas sean visibles sin un borde.

Vale la pena señalar que a algunos navegadores más antiguos no les gusta colocar border-radiustablas / celdas de tabla. Puede valer la pena poner un <div>dentro de cada celda y darle estilo. Sin embargo, esto no debería afectar a las versiones actuales de ningún navegador (excepto IE, que no admite esquinas redondeadas en absoluto, ver más abajo)

Finalmente, no es que IE no sea compatible border-radiusen absoluto (IE9 beta sí, pero la mayoría de los usuarios de IE estarán en IE8 o menos). Si desea piratear IE para que admita border-radius, mire http://css3pie.com/

[EDITAR]

Bien, esto me estaba molestando, así que hice algunas pruebas.

Aquí hay un ejemplo de JSFiddle con el que he estado jugando

Parece que lo fundamental que te faltaba estaba border-collapse:separate;en el elemento de la tabla. Esto evita que las celdas unan sus bordes, lo que les permite recoger el radio del borde.

Espero que ayude.

La respuesta seleccionada es terrible. Implementaría esto apuntando a las celdas de la tabla de la esquina y aplicando el radio de borde correspondiente.

Para obtener las esquinas superiores, establezca el radio del borde en el primer y último tipo de los elementos th , luego termine estableciendo el radio del borde en el último y el primero del tipo td en el último del tipo tr para obtener las esquinas inferiores.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

La mejor solución que he encontrado para esquinas redondeadas y otro comportamiento de CSS3 para IE <9 se puede encontrar aquí: http://css3pie.com/

Descargue el complemento, cópielo en un directorio en la estructura de su solución. Luego, en su hoja de estilo, asegúrese de tener la etiqueta de comportamiento para que extraiga el complemento.

Ejemplo simple de mi proyecto que me da esquinas redondeadas, degradado de color y sombra de caja para mi mesa:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

No se preocupe si su intellisense CSS de Visual Studio le da el subrayado verde para propiedades desconocidas, todavía funciona cuando lo ejecuta. Algunos de los elementos no están claramente documentados, pero los ejemplos son bastante buenos, especialmente en la portada.

A través de la experiencia personal, he descubierto que no es posible redondear las esquinas de una celda de una tabla HTML con CSS puro. Es posible redondear el borde más externo de una mesa.

Tendrás que recurrir al uso de imágenes como se describe en este tutorial , o cualquier similar :)

Es un poco tosco, pero aquí hay algo que armé y que se compone completamente de CSS y HTML.

• Esquinas exteriores redondeadas
• Fila de encabezado
• Varias filas de datos

Este ejemplo también hace uso de la :hoverpseudoclase para cada celda de datos <td>. Los elementos se pueden actualizar fácilmente para satisfacer sus necesidades y el desplazamiento se puede desactivar rápidamente.

(Sin embargo, todavía no he logrado :hoverque funcione correctamente para filas completas <tr>. La última fila flotante no se muestra con esquinas redondeadas en la parte inferior. Estoy seguro de que hay algo simple que se está pasando por alto).

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Agregue un <div>envoltorio alrededor de la tabla y aplique el siguiente CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

a esta envoltura.

Para adaptar la brillante respuesta de @luke flournoy, y si no está usando then su tabla, aquí está todo el CSS que necesita para hacer una tabla redondeada:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Para una tabla con bordes y desplazable, use esto (reemplace variables, $textos iniciales)

Si usa thead, tfooto th, simplemente reemplácelos tr:first-childy tr-last-childy tdcon ellos.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Puede probar esto si desea las esquinas redondeadas a cada lado de la mesa sin tocar las celdas: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

HTML de muestra

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, fácilmente convertido a CSS, use sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Lo siguiente es algo que usé y que funcionó para mí en todos los navegadores, así que espero que ayude a alguien en el futuro:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Obviamente, la #contentblockparte se puede reemplazar / editar según sea necesario y puede encontrar el border-radius.htcarchivo haciendo una búsqueda en Google o en su navegador web favorito.

Es decir css3, solo los navegadores recientes que no sean IE <9 lo admitirán.

Consulte aquí , deriva la propiedad redonda para todos los navegadores disponibles.

Agregar entre <head>etiquetas:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

y en el cuerpo:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

El color de la celda, el contenido y el formato son, por supuesto, por ejemplo;
se trata de espaciar las celdas llenas de color dentro de un div. Al hacerlo, los bordes negros de la celda / borde de la tabla son en realidad el color de fondo div.
Tenga en cuenta que deberá establecer el div-border-radius en aproximadamente 2 valores mayores que los radios del borde de la esquina de la celda separada, para obtener un efecto de esquina redondeada suave.

Lección sobre bordes de tabla ...

NOTA: El siguiente código HTML / CSS debe verse solo en IE. ¡El código no se procesará correctamente en Chrome!

Necesitamos recordar eso:

1. Una tabla tiene un borde: su límite exterior (que también puede tener un radio de borde).

2. Las propias celdas TAMBIÉN tienen bordes (que también pueden tener un radio de borde).

3. Los bordes de la tabla y la celda pueden interferir entre sí:

   El borde de la celda puede atravesar el borde de la tabla (es decir, el límite de la tabla).

   Para ver este efecto, modifique las reglas de estilo CSS en el siguiente código de la siguiente manera:
   i. table {border-collapse: separado;}
   ii. Elimine las reglas de estilo que rodean las celdas de las esquinas de la tabla.
   iii. Luego juegue con el espaciado de bordes para que pueda ver la interferencia.

4. Sin embargo, el borde de la tabla y los bordes de la celda se pueden COLLAPSAR (usando: border-collapse: collapse;).

5. Cuando se contraen, los bordes de la celda y la tabla interfieren de forma diferente:

   yo. Si el borde de la tabla está redondeado pero los bordes de la celda siguen siendo cuadrados, entonces la forma de la celda tiene prioridad y la tabla pierde sus esquinas curvas.

   ii. Por el contrario, si las celdas de las esquinas están curvas pero el límite de la tabla es cuadrado, verá una esquina cuadrada fea que bordea la curvatura de las celdas de las esquinas.

6. Dado que el atributo de la celda tiene prioridad, la forma de redondear las cuatro esquinas de la mesa es mediante:

   yo. Colapsar bordes en la tabla (usando: border-collapse: collapse;).

   ii. Establecer la curvatura deseada en las celdas de las esquinas de la tabla.
   iii. No importa si las esquinas de la mesa están redondeadas (es decir, su radio de borde puede ser cero).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}