Définir le border-radius CSS pour chaque coin avec prévisualisation et préréglages
Un générateur de border-radius vous laisse arrondir les coins d'un élément visuellement — en ajustant chaque coin avec des curseurs et en regardant un aperçu en direct — puis copier la valeur border-radius CSS exacte. Les coins arrondis sont l'une des touches les plus courantes du design d'interface moderne, adoucissant cartes, boutons, champs et images, mais le CSS qui les contrôle peut régler chacun des quatre coins indépendamment et même les rendre elliptiques, ce qui est difficile à imaginer d'après les seuls nombres. Glisser un curseur et voir la forme changer est bien plus rapide que d'éditer des valeurs à l'aveugle.
Le détail que la plupart ignorent, c'est l'étendue de border-radius : au-delà d'un arrondi uniforme, vous pouvez donner à chaque coin son propre rayon, et utiliser deux valeurs par coin pour créer des courbes elliptiques plutôt que circulaires — c'est ainsi qu'on fait les formes organiques et asymétriques « blob ». Un rayon égal assez grand sur un carré le transforme en cercle parfait. Cet outil génère du CSS basé sur les standards dans votre navigateur avec préréglages et contrôle par coin, prêt à coller sur tout élément.
Oui. border-radius accepte jusqu'à quatre valeurs, une par coin (haut-gauche, haut-droit, bas-droit, bas-gauche), vous pouvez donc arrondir certains et laisser d'autres carrés, ou donner à chacun une valeur différente. Le générateur expose un contrôle par coin précisément pour cela.
Réglez le border-radius à 50% (ou la moitié de la largeur de l'élément en pixels) sur un élément carré. Comme le rayon atteint le centre de chaque côté, les coins fusionnent en un cercle continu. Une forme de pilule vient d'un grand rayon sur un élément plus large que haut.
Une seule valeur crée un coin circulaire (quart de cercle) ; deux valeurs donnent au coin des rayons horizontal et vertical séparés, produisant une courbe elliptique. Combiner différentes valeurs elliptiques sur chaque coin est ainsi qu'on fait les formes douces et organiques « blob ».
Oui. Un rayon en pixels est une taille fixe, tandis qu'un pourcentage est relatif aux dimensions de l'élément, il évolue donc quand l'élément est redimensionné. Les pourcentages sont la raison pour laquelle 50% produit fiablement un cercle sur tout carré, quelle que soit sa taille réelle.
Générateur d'ombre de boîte CSS · Générateur Flexbox · Générateur CSS Grid · Générateur d'ombre de texte CSS · Générateur d'animations CSS · Générateur de filtres CSS