Générateur de Border Radius CSS
Générateur visuel de border-radius CSS. Ajustez chaque coin indépendamment avec aperçu en temps réel et copiez le code CSS instantanément.
Qu'est-ce que CSS border-radius?
CSS border-radius est une propriété qui arrondit les coins de la bordure extérieure d'un élément. Vous pouvez définir chaque coin indépendamment avec une à quatre valeurs, ou contrôler chaque coin avec des propriétés individuelles.
Comment faire un cercle parfait avec border-radius?
Définissez border-radius à 50% sur un élément carré (largeur et hauteur égales). Cela crée un cercle parfait. Pour une ellipse, utilisez border-radius: 50% sur un élément rectangulaire.
Quelles unités puis-je utiliser pour border-radius?
Border-radius accepte px, %, em, rem, vw, vh et d'autres unités de longueur CSS. Les pourcentages sont relatifs aux dimensions de l'élément.
Quelle est la syntaxe raccourcie de border-radius?
La syntaxe raccourcie suit le modèle: haut-gauche haut-droit bas-droit bas-gauche. Une valeur s'applique à tous les coins. Deux valeurs définissent haut-gauche/bas-droit et haut-droit/bas-gauche.
Puis-je créer des coins elliptiques?
Oui, en utilisant la syntaxe slash (/) vous pouvez définir des rayons horizontaux et verticaux séparés. Par exemple, border-radius: 50% / 100px crée une courbe elliptique.
Est-ce que border-radius fonctionne sur tous les éléments?
Border-radius fonctionne sur la plupart des éléments HTML y compris div, button, img et input. Cependant, il peut ne pas clipper le contenu qui déborde sans overflow: hidden.
Puis-je créer des formes complexes avec border-radius?
Oui, en combinant différentes valeurs de rayon pour chaque coin, vous pouvez créer des pilules, des ovales, des feuilles et des formes organiques personnalisées.
Est-ce que border-radius est supporté dans tous les navigateurs?
Oui, border-radius est supporté dans tous les navigateurs modernes y compris Chrome, Firefox, Safari, Edge et les navigateurs mobiles.
Comment faire un bouton en forme de pilule?
Définissez border-radius à une valeur égale ou supérieure à la moitié de la hauteur de l'élément. Pour un bouton de 40px de haut, utilisez border-radius: 20px ou plus.
Est-ce que border-radius affecte les images de fond?
Oui, border-radius découpe le fond, l'image de fond et la bordure d'un élément. Le fond suit automatiquement les coins arrondis.
Puis-je animer border-radius?
Oui, border-radius est animable avec des transitions et des animations CSS. Vous pouvez transiter en douceur entre différentes valeurs de rayon.
Puis-je utiliser border-radius avec les transformations CSS?
Oui, border-radius fonctionne bien avec les transformations CSS comme rotate, scale et translate.
Comment créer un cercle avec une bordure?
Appliquez border-radius: 50% à un élément carré avec largeur et hauteur égales, puis ajoutez une propriété border.
Quelle est la différence entre les propriétés individuelles et la syntaxe raccourcie?
Les propriétés individuelles comme border-top-left-radius vous donnent un contrôle précis sur chaque coin. La syntaxe raccourcie vous permet de définir plusieurs coins en une seule déclaration.
Comment utiliser Générateur de Border Radius CSS
Créez des coins arrondis visuellement avec ce générateur de CSS border-radius. Tout s'exécute localement dans votre navigateur et aucune donnée n'est envoyée.
- Choisissez px, %, em ou rem dans le menu déroulant Unit.
- Faites glisser les curseurs Top Left, Top Right, Bottom Right et Bottom Left pour arrondir chaque coin indépendamment.
- Activez Link all corners pour appliquer une seule valeur aux quatre coins.
- Copiez le CSS généré depuis l'aperçu et collez-le dans votre feuille de style.
50 % sur les quatre coins donne un cercle ou une pilule parfaite ; utilisez em ou rem pour que le rayon suive votre typographie.
Outils associés
- Générateur de Box Shadow CSS Générateur en ligne gratuit de box-shadow CSS. Créez visuellement de belles ombres avec décalage, flou, étalement, couleur et inset ajustables. Aperçu en direct et copie instantanée.
- Générateur de Dégradés CSS Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
- Générateur CSS Grid Générateur visuel gratuit de CSS Grid avec aperçu en direct. Concevez des grilles responsives interactivement et exportez du code CSS prêt pour la production.
- Générateur CSS Flexbox Générateur visuel CSS Flexbox avec aperçu en direct. Ajustez les propriétés flex et obtenez du code CSS prêt à l'emploi.
- Générateur de Border Radius Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur d'Easing CSS Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
- Générateur de Text Shadow CSS Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.