Créez des coins arrondis CSS parfaits avec un éditeur visuel en direct. Ajustez chaque coin indépendamment, choisissez les unités (px, %, em, rem) et copiez du CSS prêt à l'emploi instantanément. 100% gratuit et côté client.
border-radius: 8px; Le Générateur de Rayon de Bordure CSS est un outil visuel pour créer des coins arrondis personnalisés sur des éléments HTML. Au lieu de deviner des valeurs, cet outil vous permet d'ajuster finement chaque coin indépendamment — haut gauche, haut droite, bas droite et bas gauche — avec votre choix d'unités (px, %, em, rem). Il génère automatiquement la syntaxe CSS la plus compacte, en utilisant une notation abrégée lorsque les coins sont symétriques. Que vous ayez besoin d'une carte arrondie subtile, d'un cercle parfait, d'un bouton en forme de pilule ou d'une forme organique de feuille, cet outil le rend sans effort. Tout le traitement se fait dans votre navigateur — aucune donnée n'est envoyée nulle part.
La propriété CSS border-radius arrondit les coins du bord extérieur d'un élément. Vous pouvez définir un seul rayon pour rendre tous les coins identiques, ou définir jusqu'à quatre valeurs pour contrôler chaque coin individuellement. Lors de l'utilisation de valeurs en pourcentage, 50% crée un cercle parfait ou une ellipse selon le ratio d'aspect de l'élément.
Utilisez px pour des coins fixes pixel-parfaits (par exemple, 8px pour des cartes), % pour un dimensionnement relatif qui s'adapte à l'élément (par exemple, 50% pour des cercles), em/rem pour des coins qui s'adaptent à la taille de police. Pour les boutons et les cartes, px est le plus courant. Pour les formes responsives, % fonctionne le mieux.
CSS border-radius accepte de 1 à 4 valeurs : 1 valeur = tous les coins ; 2 valeurs = haut-gauche+bas-droite et haut-droite+bas-gauche ; 3 valeurs = haut-gauche, haut-droite+bas-gauche, bas-droite ; 4 valeurs = haut-gauche, haut-droite, bas-droite, bas-gauche. Cet outil détecte automatiquement la symétrie et génère la syntaxe la plus courte valide.
Oui. La syntaxe border-radius générée suit le standard CSS3 et fonctionne dans tous les navigateurs modernes incluant Chrome, Firefox, Safari, Edge et les navigateurs mobiles. Aucun préfixe de fournisseur n'est nécessaire pour les versions actuelles de navigateurs.