CSS3 Bordes redondeados y punteados?

¿Es posible crear un borde en CSS3 de modo que sean redondeados y punteados?CSS3 Bordes redondeados y punteados?

estoy redondeo mis esquinas pero parecen sólido con:

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

El resto de la frontera es de puntos, pero las esquinas son sólidos.

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

Gracias

Fuente

2010-09-15 jmcmahon

Es un error en firefox.see this issue, mozilla no admite la esquina redondeada para el borde punteado y discontinuo.

Fuente

2010-09-15 13:51:17

Cinco años más tarde y este error sigue ahí ..:/ – dschu

Que sea de seis ...! – Buzinas

Esto será (finalmente) resuelto [en el próximo lanzamiento] (https://developer.mozilla.org/en-US/Firefox/Releases/50#CSS) de Firefox que llegará en noviembre: "Esquinas redondeadas por el borde con guiones" y los estilos punteados ahora se representan con el estilo especificado en lugar de un estilo sólido " – vard

Sí, en teoría, se puede tener bordes punteados y redondeadas, pero como se ha visto prácticamente navegadores no puede soportar todavía.

Fuente

2010-09-15 13:47:23 RoToRa

Sí me encontré con el informe de error - https://bugzilla.mozilla.org/show_bug.cgi?id=382721 – jmcmahon

Una solución es utilizar varias imágenes de fondo. Puede usar este enfoque para especificar un background-image diferente para las cuatro esquinas.

Es posible que también 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; 

}

Fuente

2015-02-25 11:39:50

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 de puntos es sólo un punto con un poco de espacio en blanco en el lado de la cruz de la misma . Después de eso deberías ser bueno.

Fuente

2017-03-30 15:22:31

CSS3 Bordes redondeados y punteados?

Respuesta

Cuestiones relacionadas