content - -webkit- y-moz-border-radius no funcionan en tablas?

css browser compatibility

Question

Esta pregunta ya tiene una respuesta aquí:

• Propiedad de radio de borde de CSS3 y colapso de borde: el colapso no se mezcla. ¿Cómo puedo usar el radio de borde para crear una tabla colapsada con esquinas redondeadas? 21 respuestas

Esto funciona

div {
  -moz-border-radius: 5px 5px 0 0;
  border:1px solid #000;
  margin:30px;
}

Esto no funciona

table {
  -moz-border-radius: 5px 5px 0 0;
  border:1px solid #000;
  margin:30px;
}

¿Alguien sabe cómo usar -moz y -webkit para trabajar en tablas?

Answer 1

5.6. Efecto sobre tablas

Las propiedades ''border-radius'' se aplican a los elementos ''table'' y ''inline-table''. Cuando ''border-collapse'' es ''collapse'', el UA puede aplicar las propiedades de border-radius a los elementos ''table'' y ''inline-table'', pero no es obligatorio. En este caso, no solo los radios de borde de las esquinas adyacentes no deben intersecarse, sino que los radios horizontal y vertical de una sola esquina no pueden extenderse más allá de los límites de la celda en esa esquina (es decir, las otras esquinas de la celda no deben verse afectadas por la curva de esta esquina). radio de la frontera). Si los valores calculados de los radios de borde causan este efecto, entonces los valores utilizados de todos los radios de borde de la tabla deben reducirse por el mismo factor para que los radios no se intersecten ni se extiendan más allá de los límites de sus respectivas celdas de esquina.

El efecto del radio de borde en los elementos de la tabla interna no está definido en los Fondos y Bordes de CSS3, pero puede definirse en una futura especificación. Los UA de CSS3 deben ignorar las propiedades del radio del borde aplicadas a los elementos de la tabla interna cuando el ''colapso del borde'' es ''colapso''.