Ce site utilise des statistiques de première main respectueuses de la vie privée pour savoir quelles pages et quels outils sont utiles. Aucune donnée n'est partagée avec des traceurs ou publicitaires tiers. Détails de confidentialité

Outils · CSS · Arrondir les coins en CSS

Arrondir les coins en CSS

Façonnez chaque coin d'une boîte séparément, ou fondez-les en une forme organique, et copiez le CSS border-radius.

Votre résultat apparaît ici

Ajoutez un fichier et lancez l’outil.

Réglages

Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.

Comment ça marche

  1. Réglez le rayon lié, ou désactivez "Lier tous les coins" pour régler chacun séparément.

  2. Passez en mode Blob, réglez la douceur, et cliquez sur Aléatoire pour une forme organique.

  3. Copiez le CSS border-radius terminé.

Questions fréquentes

Oui. Désactivez "Lier tous les coins" et réglez chacun des quatre indépendamment.

Il génère la technique de raccourci border-radius utilisée pour les formes organiques et irrégulières : un rayon horizontal et vertical différent par coin. Réglez l'intensité de l'effet avec Douceur, puis cliquez sur Aléatoire pour une nouvelle forme.

Oui. Réglez le rayon à 50 % pour un cercle sur une boîte carrée, ou une forme en pilule sur un rectangle large.

Non. Tout fonctionne dans votre navigateur.

Guides

Un aperçu plus précis de problèmes concrets que résout cet outil.

4 min de lecture

Why Every Rounded Corner Looks the Same (and How Blob Shapes Fix It)

The same 8px or 12px radius on every card, button and image is efficient and instantly forgettable. border-radius can do far more than round a rectangle's corners evenly.

Lire le guide 4 min de lecture

How to Round Corners and Build CSS Blob Shapes

Simple mode for a clean rectangle, circle or pill. Blob mode for an organic, asymmetric shape. The exact controls for both, and what the generated CSS actually contains.

Lire le guide 4 min de lecture

Circle, Pill or Blob: Picking the Right border-radius

An avatar circle, a pill button and an organic background shape all use border-radius, with three different settings: 50% on a square, a px radius of half the height, eight percentages.

Lire le guide

Outils similaires

Créer une ombre CSS

Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis copiez le code.

 Générateur de clip-path

Créez une forme de découpe CSS clip-path - polygone, cercle, ellipse ou rectangle intérieur - avec un aperçu en direct, et copiez le code.

 Créer un effet glassmorphism

Créez une carte en verre dépoli avec flou d'arrière-plan, transparence et bordure douce, et copiez le CSS.

 Créer un dégradé CSS

Créez un dégradé CSS linéaire, radial ou conique, et copiez le code.

 Bac à sable Flexbox

Créez une mise en page CSS flexbox - direction, retour à la ligne, justification, alignement, espacement, et croissance/réduction/base par élément - avec un aperçu en direct, et copiez le code.

 Bac à sable Grid

Créez une mise en page CSS grid - nombre de pistes, espacements, alignement, et placement par élément - avec un aperçu en direct, et copiez le code.

Commentaires

  1. Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.
Votre note (facultatif)

Aucune note sélectionnée