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.