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. En savoir plus

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.

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

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

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.

Outils similaires

Créer un dégradé CSS

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

 Créer une ombre CSS

Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis 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.

 Générateur de courbe cubic-bezier

Faites glisser une courbe pour créer une valeur d'accélération cubic-bezier(), regardez-la jouer avec une transition CSS en direct, et 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.

 Minificateur et formateur CSS

Minifiez ou mettez en forme du CSS, en direct pendant que vous collez, entièrement dans votre navigateur.

 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