Softonic

Générateur de rayon de bord CSS

Étape 1 / 2 Générer du CSS
Résultats

border-radius semble simple jusqu’à ce que vous essayiez d’expliquer pourquoi 50% sur un carré donne un cercle, mais 50% sur un rectangle donne un ovale. Ce générateur vous permet de saisir une valeur pour chacun des quatre coins, de choisir entre px, % et rem, puis de copier la forme abrégée exacte qu’il produit. Utile pour les formes de boutons, les coins de cartes, les boutons en pilule et les coins asymétriques.

Comment construire un rayon de bord

  1. 1

    Définissez chaque coin

    Saisissez un rayon pour les coins haut-gauche, haut-droit, bas-droit et bas-gauche.

  2. 2

    Choisissez l'unité

    Pixels (taille fixe), pourcentage (par rapport à l'élément) ou rem (par rapport à la taille de police racine).

  3. 3

    Générez le CSS

    Appuyez sur Générer le CSS pour créer la forme abrégée.

  4. 4

    Copiez la règle

    Copiez la forme abrégée de `border-radius` et collez-la dans votre feuille de style.

Ordre des raccourcis

border-radius: haut-gauche haut-droit bas-droit bas-gauche;

Identique à margin/padding : dans le sens des aiguilles d’une montre en commençant par le haut-gauche. Les valeurs omises reflètent le coin opposé. Donc border-radius: 10px 20px; signifie 10px haut-gauche et bas-droit, 20px haut-droit et bas-gauche.

Ce que ce générateur ne fait pas

Il définit un rayon par coin, il ne produit donc jamais de coins elliptiques (la forme à deux valeurs avec barre oblique, comme border-radius: 20px 10px / 5px 15px;) ni de propriétés développées comme border-top-left-radius. Si vous en avez besoin, écrivez le CSS à la main.

Pourcentage vs. pixels

Unité Comportement
px Fixe, ne s’adapte pas à la taille de l’élément
% Pourcentage de la largeur de l’élément (horizontal) et de la hauteur (vertical)
em S’adapte à la taille de police de l’élément
rem S’adapte à la taille de police racine

50% sur un élément carré = cercle. Sur un rectangle de 200x100, 50% = 100px de rayon horizontal + 50px vertical = ellipse.

Formes courantes

Forme CSS
Cercle (carré) border-radius: 50%;
Pilule border-radius: 9999px; (toute valeur >= la moitié de la hauteur)
Carte arrondie border-radius: 8px; ou 12px
Bulle de chat border-radius: 18px 18px 0 18px; (queue en bas à droite)
Subtil border-radius: 2px; ou 4px

La règle des “moitié de la hauteur” pour les pilules

Un bouton en pilule est un rectangle dont les extrémités horizontales sont des demi-cercles parfaits. Pour obtenir cela de manière fiable, définissez border-radius à au moins la moitié de la hauteur de l’élément. Utiliser 9999px (ou toute valeur très grande) est sûr car le navigateur limite le rayon à la géométrie réelle.

Interaction avec le débordement

border-radius ne découpe que l’arrière-plan, la bordure et l’ombre de boîte par défaut. Pour découper les éléments enfants (images, éléments imbriqués) dans la forme arrondie, ajoutez :

overflow: hidden;

ou utilisez isolation: isolate + overflow: hidden pour contenir également les contextes de pile.

Remarque sur l’accessibilité

Il n’y a pas de problème d’accessibilité avec border-radius lui-même, mais un arrondi extrême sur les éléments interactifs (pilules, chips) ne doit pas réduire la cible de tapotement. Gardez les boutons d’au moins 44x44 px (recommandation WCAG) indépendamment de l’arrondi des coins.

Questions fréquentes

Parce que le border-radius en pourcentage est mesuré comme “% de la largeur” horizontalement et “% de la hauteur” verticalement, sur un élément non carré, cela produit une ellipse. Pour un cercle, l’élément doit être carré, ou utiliser des valeurs en pixels qui correspondent aux dimensions de l’élément.

Seulement l’arrière-plan, la bordure et l’ombre de boîte par défaut. Les éléments enfants ne sont pas découpés à moins que vous n’ajoutiez également overflow: hidden au parent.

Il est animable entre des valeurs numériques : transition: border-radius 200ms; fonctionne pour les pixels et les pourcentages. Animer entre un raccourci elliptique complexe et un rayon simple peut produire des images intermédiaires surprenantes ; testez et simplifiez les états de début/fin si cela semble étrange.

La spécification ne fixe pas de limite, mais les navigateurs limitent le rayon effectif à la moitié du bord le plus court de l’élément. Utiliser border-radius: 9999px sur un bouton de 40px de haut produit une pilule, le navigateur limite silencieusement à 20px.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.