Générateur d'image à coins arrondis

Ce qui distingue cet outil d'arrondi : chaque coin peut avoir son propre rayon, le rayon peut s'exprimer en pixels ou en pourcentage du petit côté, et le coin lui-même peut être un arc arrondi simple, un squircle fluide, un biseau droit ou un concave vers l'intérieur. L'outil affiche aussi la règle CSS border-radius correspondante, pour reproduire la même forme dans le code plutôt que comme fichier.

Pourquoi arrondir les coins d'une image ?

Comment ajouter des coins arrondis à une image

1. Chargez votre image. Glissez un fichier sur la zone de dépôt ou choisissez Sélectionner une image. JPG, PNG, WebP, GIF, BMP, AVIF et SVG fonctionnent tant que votre navigateur peut les décoder.
2. Réglez le rayon. Faites glisser l'une des poignées d'angle rondes sur l'aperçu, déplacez le curseur Rayon des coins, ou saisissez un nombre exact et passez l'unité entre px et %.
3. Choisissez un style de coin. Arrondi, Squircle, Biseau ou Concave. Désactivez Lier tous les coins pour donner à chaque coin sa propre valeur, disposés à l'écran exactement comme les coins qu'ils contrôlent.
4. Ajoutez une marge intérieure, un fond ou un contour, si vous le souhaitez. La marge intérieure agrandit le canvas autour de l'image, le fond le remplit, et le contour suit le tracé arrondi au lieu de l'ancien rectangle.
5. Téléchargez. Conservez PNG pour des coins transparents, puis cliquez sur Télécharger l'image. Le panneau indique les dimensions exportées et la taille du fichier, et la boîte CSS affiche la règle de feuille de style équivalente.

Rayon en pixels ou en pourcentage

Un rayon en pixels est absolu : 32 px font 32 px que l'image fasse 400 ou 4000 pixels de large, donc la même valeur paraît spectaculaire sur une petite miniature et à peine visible sur une grande photo. Un rayon en pourcentage se mesure par rapport au petit côté de l'image, donc il s'adapte à l'image et a le même rendu sur chaque export. 50 % est la valeur utile maximale : cela produit un cercle sur une image carrée et une pilule sur un rectangle.

Les quatre styles de coins

• Arrondi — un quart de cercle, la même géométrie qu'un navigateur dessine pour border-radius. Prévisible, et le seul style qui se correspond un-pour-un avec CSS.
• Squircle — un coin de type superellipse. La courbe commence plus loin le long de chaque bord et se fond dans le côté droit sans le changement brusque de courbure d'un cercle, c'est pourquoi les guides d'icônes d'apps iOS et Android utilisent cette forme.
• Biseau — le coin est coupé par une diagonale droite. Plus tranchant et plus technique qu'une courbe, et il reste net aux petites tailles.
• Concave — l'arc courbe vers l'intérieur et retire une échancrure. Deux coins concaves sur des côtés opposés se lisent immédiatement comme un ticket ou une étiquette.

Choisir le format de sortie

Comme JPG n'a pas de canal alpha, l'exporter remplit les coins découpés avec la couleur de fond choisie au lieu de les laisser vides. C'est souvent exactement ce que vous voulez — une photo arrondie blanche sur une page blanche — mais ce n'est pas de la transparence, et on ne peut pas l'annuler plus tard.

Fonctionnalités principales

• Privé par conception : le fichier est lu avec l'API FileReader du navigateur et dessiné sur un canvas en local. Il n'est jamais envoyé.
• Édition en glissant le coin : tirez une poignée en diagonale sur l'aperçu et voyez le rayon suivre votre doigt ou le curseur.
• Contrôle par coin : arrondissez seulement les deux coins du haut, ou rendez un côté concave et laissez le reste carré.
• Fonds d'aperçu : alternez entre un damier de transparence, le blanc, le sombre et un dégradé de couleur pour vérifier le bord alpha avant de télécharger.
• Marge intérieure, remplissage de fond et contour qui suivent tous le même tracé arrondi.
• Échelle de sortie : exportez à la résolution d'origine, ou réduisez à 75 %, 50 % ou 25 % dans la même passe.
• CSS copiable : la règle border-radius générée reproduit la même forme dans une feuille de style lorsqu'un fichier n'est pas la bonne réponse.
• Bords anti-crénelés : le coin est dessiné comme un chemin de découpe, donc la courbe reste lisse au lieu d'afficher un bord en marches d'escalier.

Fichier image ou CSS ?

Si l'image arrondie va dans un diaporama, un PDF, une signature d'e-mail, une fiche marketplace ou tout outil qui n'exécutera pas votre feuille de style, vous avez besoin d'un vrai fichier avec une vraie transparence — exportez un PNG. Si elle va sur une page web que vous contrôlez, une règle CSS est plus légère, reste nette à n'importe quelle taille et est plus facile à modifier ensuite ; copiez l'extrait. Les deux ne s'excluent pas : beaucoup d'équipes livrent le PNG pour l'usage externe et le CSS pour le site.

Dépannage

• Le coin paraît crénelé : la source est probablement déjà petite. Arrondissez à la plus grande résolution disponible, puis réduisez, plutôt que d'arrondir une image qui a été agrandie.
• Un fin halo clair apparaît sur un fond sombre : l'image avait un cache blanc intégré. Ajoutez un ou deux pixels de marge intérieure d'une couleur assortie, ou augmentez légèrement le rayon pour que le halo soit découpé.
• Le téléchargement s'ouvre comme un carré blanc : le format est JPG ou le fond n'est pas réglé sur Transparent. Passez le format de sortie sur PNG.
• Une très grande photo semble lente : le canvas redessine l'image en pleine résolution à chaque mouvement du curseur. Relâchez le curseur et laissez un instant au navigateur, ou réduisez l'échelle de sortie.
• Un GIF animé perd son animation : le canvas exporte une seule image. Seule la première image est arrondie et enregistrée.

Questions fréquentes

Mon image est-elle envoyée sur un serveur ?

Non. Le fichier est lu par votre navigateur avec l'API FileReader et dessiné sur un canvas HTML sur votre propre appareil. Rien n'est envoyé à miniwebtool, donc les captures privées, les visuels clients et les photos personnelles ne quittent jamais votre ordinateur. La page elle-même a tout de même besoin d'une connexion Internet pour se charger.

Pourquoi mes coins arrondis apparaissent-ils blancs ou noirs au lieu d'être transparents ?

Seuls PNG et WebP peuvent stocker la transparence. Si vous exportez en JPG, le format n'a pas de canal alpha, donc les coins découpés sont remplis avec la couleur de fond. Choisissez PNG dans la liste Format et réglez le fond sur Transparent. Si les coins restent incorrects, vérifiez que l'application ou le site où vous collez l'image prend en charge l'alpha, car certains éditeurs aplatissent la transparence PNG sur du blanc.

Comment obtenir une image parfaitement circulaire ?

Passez l'unité du rayon en pourcentage et réglez le rayon sur 50 %. Sur une image carrée, cela produit un cercle parfait. Sur un rectangle, cela produit une forme de pilule ou de stade, car un rayon en pourcentage se mesure par rapport au petit côté. Utilisez le préréglage Cercle pour recadrer en carré et arrondir en un clic.

Quelle est la différence entre les coins arrondi, squircle, biseau et concave ?

Arrondi est un quart de cercle simple, la même forme que dessine CSS border-radius. Squircle étend la courbe plus loin le long de chaque bord pour que la jonction soit fluide et continue, c'est le rendu des icônes d'apps iOS et Android. Biseau coupe le coin par une diagonale droite. Concave courbe vers l'intérieur au lieu de l'extérieur et creuse une échancrure dans chaque coin, ce qui convient aux tickets, coupons et badges.

Le rayon en pixels correspond-il au border-radius CSS de mon site ?

Le rayon s'applique dans les pixels propres de l'image, donc il correspond au CSS seulement lorsque l'image s'affiche à sa taille naturelle. Un export de 1200 pixels de large montré dans une colonne de 600 pixels est réduit de moitié, donc un rayon de 48 pixels ressemble à 24 pixels à l'écran. Utilisez l'unité pourcentage pour un résultat indépendant de la taille, ou copiez l'extrait CSS généré par l'outil, qui indique déjà l'équivalent mis à l'échelle.

Puis-je conserver la qualité de l'image et la résolution d'origine ?

Oui. L'export conserve les dimensions en pixels d'origine sauf si vous changez l'échelle de sortie ou ajoutez une marge intérieure, et PNG est sans perte, donc rien n'est recompressé. Seuls les pixels des coins changent, d'opaques à transparents. WebP et JPG sont avec perte, donc utilisez-les lorsque la taille du fichier compte plus qu'une copie exacte des pixels source.