Générateur de Radius de Bordure
Générez du border-radius CSS par coin avec un aperçu en direct.
Réponse rapide: Générateur de rayons de bordure : générez une propriété CSS border-radius pour chaque coin avec un aperçu en direct. Fonctionne entièrement dans votre navigateur, gratuitement et sans inscription.
Dernière mise à jour
Bon à savoir
Rounded corners feel simple until you need each corner different, and that is exactly what per-corner control unlocks. Matching modest radii on all four corners gives the friendly, neutral look of most buttons and cards; deliberately mismatched radii produce the soft, organic "blob" shapes that have become a common decorative element behind hero sections and avatars.
One thing worth knowing is the difference between pixel and percentage radii. Pixels give a fixed corner regardless of element size, while a percentage scales with the box — a 50% radius on a square produces a perfect circle, which is the standard trick for round avatar frames. The generator emits pixels in the UI, but swapping px for % in the output is a one-character change.
Because border-radius is an animatable property, adding a CSS transition on it lets a shape morph smoothly between two states on hover. Pair the result with the Box Shadow Generator for depth or the Gradient Generator for a fill, and you have the building blocks of a modern card in a couple of copy-pastes.
Questions fréquentes
- Est-ce gratuit ?
- Oui — gratuit sans inscription.
- Puis-je créer des formes en blob ?
- Oui — donnez à chaque coin un rayon très différent pour un blob organique.
- Quelles unités sont supportées ?
- Pixels dans l'interface ; remplacez px par % dans la sortie pour un rayon basé sur un pourcentage si vous le préférez.
- Mes paramètres sont-ils téléchargés ?
- Non — l'aperçu fonctionne entièrement dans votre navigateur.
- Est-ce que ça s'anime ?
- Appliquez une transition CSS sur la propriété border-radius dans votre feuille de style pour animer entre deux valeurs.