CSS3 Bordures arrondies et pointillées?

Question

Est-il possible de créer une bordure dans CSS3 telle qu'elles soient arrondies et pointillées?

Je suis arrondir mes angles, mais ils semblent solides avec:

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

Le reste de la frontière est en pointillé, mais les coins sont solides. Je comprends que c'est spécifique à Firefox mais c'est bien pour le moment.

Merci

Answer 1

C'est un bug dans firefox.voir ce issue, mozilla ne supporte pas les coins arrondis pour les pointillés et les pointillés.

Answer 2

Oui, vous pouvez théoriquement avoir des frontières pointillées et arrondies, mais comme vous l'avez vu pratiquement les navigateurs ne supportent pas encore.

Answer 3

Une solution consiste à utiliser plusieurs images d'arrière-plan. Vous pouvez utiliser cette approche pour spécifier un background-image différent pour les quatre coins.

Vous pouvez également ajouter une cinquième image pour l'image d'arrière-plan centrale (répétée, si nécessaire).

Quelque chose le long des lignes 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; 

} 

Answer 4

Ma solution à ce problème est

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

assurez-vous que l'image de points est juste un point avec un espace blanc sur le côté de celui-ci se dessèche . Après cela, vous devriez être bon.