Générateur d’arrondis
Border Radius Generator
Façonne chaque coin séparément, syntaxe à deux valeurs pour le squircle comprise, et rend le CSS.
Arrondit les coins d’une boîte avec les huit valeurs de rayon disponibles et — parce que « fais-moi un squircle » arrive sous la même question — dessine aussi de vraies superellipses et des formes en `clip-path`, ce que `border-radius` ne sait pas faire.
Aperçu
CSS
Coins
En haut à gauche
En haut à droite
En bas à droite
En bas à gauche
Préréglages
clip-path
Une autre propriété, pour un autre travail. border-radius arrondit une boîte ; clip-path découpe une forme quelconque et emporte l’ombre avec elle.
Comment s’en servir
Faites glisser les curseurs de coin
Quatre coins, en px ou en pourcentage. L’aperçu et la déclaration se mettent à jour ensemble.
Désactivez « identique sur les deux axes » pour les formes en goutte
Cela donne la forme à huit valeurs séparées par une barre oblique, où chaque coin a un rayon horizontal et un rayon vertical. Toutes les formes organiques viennent de cette écriture-là.
Passez à clip-path quand la forme n’est pas un rectangle
Cercles, polygones, une bulle de dialogue, un chevron — et le curseur de superellipse, qui est la vraie courbe du squircle plutôt qu’un rectangle plus arrondi.
Questions fréquentes
Pourquoi un rayon de 9999 px rend-il pareil que 50 % ?
Parce que lorsque les rayons d’un même côté se chevaucheraient, la spécification met les *quatre* à l’échelle du même facteur jusqu’à ce qu’ils tiennent. Toute valeur absurdement grande s’effondre donc sur la même forme, et la page vous montre le facteur qu’elle a employé.
CSS sait-il dessiner un vrai squircle ?
Pas avec `border-radius` : ce coin est strictement elliptique, donc un « curseur de squircle » greffé sur un rayon n’est qu’un rectangle plus arrondi. La superellipse ici est dessinée en polygone `clip-path`, ce qui est la façon honnête d’obtenir cette courbe aujourd’hui.
Pourquoi mon ombre a-t-elle disparu avec clip-path ?
Parce que `clip-path` découpe l’élément, et que l’ombre est dessinée hors de l’élément. Il découpe aussi les enfants qui débordent. `border-radius` ne fait ni l’un ni l’autre, et c’est pourquoi il reste le bon outil dès que la forme est un rectangle arrondi.
Comment n’arrondir que les coins extérieurs d’un groupe ?
Arrondissez le conteneur et donnez-lui `overflow: hidden`, ou utilisez `:first-child`/`:last-child` sur les éléments. Un rayon par coin posé sur le groupe lui-même n’atteindra pas les enfants, et c’est ce qui rate d’habitude sur un groupe de boutons.
À alimenter depuis
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.