Est-il possible de créer une bordure de contour avec un rayon?

Question

Je savais que vous pouvez ajouter une bordure de contour avec CSS3.

outline: 10px solid red;

Maintenant, je me demandais comment ajouter un rayon à cette bordure de contour.

J'ai essayé celui-ci, mais ne fonctionne pas:

.radius {
    padding: 20px 60px;
    text-transform: capitalize;

    -moz-outline: 10;
    outline: 10px solid red;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;    
}

Answer 1

Firefox a une propriété -moz-outline-radius , cependant la demande d'implémentation d'une fonctionnalité similaire dans WebKit était fermée en tant que WONTFIX . Le plan pour l'avenir est de faire en sorte que les contours suivent les frontières .

Je me rends compte que cela n'aide pas beaucoup, mais la réponse à votre question est: actuellement, non (pas de manière croisée). En attendant, vous devriez utiliser une approche alternative comme celle suggérée par thekalaban.

Answer 2

Essayez d'utiliser technique des bordures infinies de CSS-Tricks et d'appliquer border-radius.

Cette méthode nécessite des bordures et box-shadow et non le contour.

Voici le lien du violon