tabla - CSS3 ¿Bordes redondeados y punteados?

quitar bordes redondeados css

Question

¿Es posible crear un borde en CSS3 de manera que estén redondeados y punteados?

Estoy redondeando mis esquinas pero aparecen sólidas con:

border: 1px dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;

El resto del borde está punteado pero las esquinas son sólidas.

Entiendo que esto es específico de Firefox pero está bien por ahora.

Gracias

Answer 1

Es un error en Firefox. Ver este issue , Mozilla no admite esquinas redondeadas para bordes punteados y discontinuos.

Answer 2

Logré encontrar una solución por accidente.

Aquí está el código:

background-color: none !important;
  border:none !important;
  border-top: 5px dotted #70c1bb !important;
    border-top-width:5px;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;

Answer 3

Mi solución para este problema es

background: url(''../images/dot.png'');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;

asegúrese de que la imagen del punto sea solo un punto con un espacio en blanco en el lado de la cruz. Después de eso deberías ser bueno.

Answer 4

Sí, en teoría puede tener bordes redondeados y punteados, pero como ha visto, es posible que los navegadores aún no lo admitan.

Answer 5

Una solución es utilizar múltiples imágenes de fondo. Puede utilizar este enfoque para especificar una background-image de background-image diferente para las cuatro esquinas.

También es posible que desee agregar una quinta imagen para la imagen de fondo central (repetida, si es necesario).

Algo a lo largo de las líneas de ...

.dashed-rounded-border {

    border: 2px dashed blue;

    background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png");
    background-position: left top, right top, right bottom, left bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;

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

}