Générateur de rayon de bordure
Créez et prévisualisez visuellement les propriétés CSS de border-radius.
CSS généré
Ajuster l'arrondi de chaque coin
Aperçu
Prévisualiser l'effet de rayon de bordure généré
Aperçu
CSS généré
border-radius: 20px;Exemples
Cliquez sur les styles de rayon de bordure prédéfinis pour les appliquer
Propriétés de rayon de bordure
Ordre des propriétés
La propriété border-radius s'applique dans le sens des aiguilles d'une montre : haut-gauche → haut-droit → bas-droit → bas-gauche
Propriétés abrégées
- •
border-radius: 10px;- S'applique aux quatre coins - •
border-radius: 10px 20px;- Le premier s'applique au haut-gauche et au bas-droit, le second au haut-droit et au bas-gauche - •
border-radius: 10px 20px 30px;- Le premier s'applique au haut-gauche, le second au haut-droit et au bas-gauche, le troisième au bas-droit - •
border-radius: 10px 20px 30px 40px;- S'applique au haut-gauche, haut-droit, bas-droit et bas-gauche dans l'ordre
Conseils d'utilisation
- • Utilisez 50% pour créer un cercle parfait
- • 4-8px est généralement bon pour les boutons
- • 8-16px est courant pour les cartes et les panneaux
- • Un rayon asymétrique peut créer des effets de conception uniques