toolsmoah

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
    Générateur de rayon de bordure | toolsmoah