border-radius est l'une des premières propriétés CSS que la plupart des gens apprennent et l'une des dernières qu'ils comprennent parfaitement. Arrondir les quatre coins d'une carte de 12 pixels est facile. Ensuite, un bouton doit être une pilule à n'importe quelle largeur, un avatar doit être un cercle, une bulle de discussion a besoin d'un coin pointu, et soudain l'ordre abrégé, la différence entre 50% et 999px&, et un rayon qui " ; arrête de croître" ; toute matière.
Ce guide explique comment fonctionne la propriété à partir de la spécification : ce que signifie chaque compte de valeur, comment les pourcentages diffèrent des pixels, comment les navigateurs mettent à l'échelle les rayons trop grands, comment construire des formes communes et pourquoi les coins arrondis ne parviennent parfois pas à apparaître. Les exemples sont vérifiés par rapport au Générateur de rayon de bordure CSS(en), qui prévisualise chaque coin en direct et délivre le raccourci valide le plus court C'est l'un des Outils CSS sur Toolz.
tl;dr :
border-radiusarrondit un élément' ; s coins Une valeur définit les quatre coins, deux valeurs définissent les paires haut-gauche/bas-droite et haut-droite/bas-gauche, trois valeurs définies haut-gauche, puis haut-droite et bas-gauche ensemble, puis bas-droite, et quatre valeurs s'étendent dans le sens des aiguilles d'une montre à partir du haut-gauche Les rayons des pixels sont des courbes fixes ; les pourcentages sont mesurés séparément en fonction de la largeur et de la hauteur, donc50%fait un cercle seulement sur un carré Lorsque les rayons le long d'un côté totalisent plus que le côté, le navigateur met chaque rayon à l'échelle proportionnellement vers le bas Le générateur de rayon frontière gère le raccourci pour vous, côté client, gratuit, sans inscription.
Que fait la propriété CSS border-radius ?
le border-radius propriété arrondit les coins extérieurs d'un élément' ; s boîte de bordure Chaque coin devient un quart d'ellipse avec un rayon horizontal et un rayon vertical Lorsque les deux rayons sont égaux, le coin est un quart de cercle.
Il est défini dans le W3C Module CSS Arrière-plans et frontières Niveau 3« Et est pris en charge sans préfixe dans tous les principaux navigateurs depuis plus d'une décennie, aucun préfixe de fournisseur n'est donc nécessaire. ».
L'arrondi affecte plus que la ligne de bordure L'élément' ; s fond est clipsé à la forme arrondie, les box-shadow suit la courbe, et dans les navigateurs modernes, c'est le cas outline. Le contenu à l'intérieur de l'élément n'est pas coupé à moins que vous ajoutiez overflow: hidden(c’est la raison la plus courante pour laquelle les coins arrondis semblent échouer.
Comment fonctionne le raccourci frontière-rayon ?
border-radius est un raccourci pour quatre propriétés à long terme : border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius. Le nombre de valeurs que vous donnez décide à quels coins chaque valeur s'applique.
| Valeurs | exemple | Haut-gauche | En haut à droite | En bas à droite | Bas-gauche |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
Le motif est le même ordre dans le sens des aiguilles d'une montre utilisé par margin et padding[TRADUCTION], en partant du coin supérieur gauche au lieu du côté supérieur Les valeurs manquantes sont remplies à partir de leur partenaire diagonal : avec deux valeurs, les copies en bas à droite en haut à gauche et en bas à gauche en haut à droite Avec trois, les copies en bas à gauche en haut à droite.
Le générateur inverse ce processus Vous définissez chaque coin avec son propre curseur, et il écrit le moins de valeurs qui produisent la même forme :
- Les quatre coins égaux donnent une valeur.
- Le haut à gauche égal au bas à droite et le haut à droite égal au bas à gauche donnent deux valeurs.
- Le haut à droite égal au bas à gauche (mais l'autre diagonale diffère) donne trois valeurs.
- Tout le reste en donne quatre.
Une conséquence surprend les gens. Tournez uniquement le coin supérieur gauche de 20 px et la sortie est border-radius: 20px 0px 0px;, pas la valeur quatre 20px 0px 0px 0px. Les deux sont corrects ; la forme à trois valeurs est plus courte car en haut à droite et en bas à gauche sont tous deux nuls. Chaque valeur conserve son unité, donc un coin zéro s'imprime comme 0px.
Quelle est la différence entre px et % pour le rayon bordure ?
Un rayon de pixel est une taille absolue Un rayon en pourcentage est relatif à l'élément' ; s taille, et les parties horizontale et verticale sont mesurées séparément : le rayon horizontal par rapport à la largeur, le rayon vertical par rapport à la hauteur.
Sur un carré, ce sont le même nombre Sur un rectangle, ils ne le sont pas, c'est pourquoi 50% transforme un carré en cercle mais un rectangle en ellipse.
Prenez le générateur et le n°39 ; s boîte d'aperçu, qui mesure 224 px de large et 160 px de haut :
| évaluer | Rayon horizontal | Rayon vertical | Forme |
|---|---|---|---|
16px |
16px | 16px | Rectangle arrondi, coins circulaires |
50% |
112px (50% de 224) | 80px (50% de 160) | Ellipse |
25% |
56px | 40px | Rectangle arrondi, coins elliptiques |
999px |
999px, mis à l'échelle à 80px | 999px, mis à l'échelle à 80px | Pilule aux extrémités rondes |
Les deux autres unités se comportent comme des pixels une fois résolus. em est relatif à l'élément' ; sa propre taille de police et rem à la taille de la police racine, donc 1rem est 16 px avec les paramètres par défaut du navigateur. Utilisation em ou rem permet aux coins de s'adapter à la taille du texte, qui convient aux boutons et aux balises qui se développent avec leur étiquette.
Dans le générateur, les curseurs fonctionnent de 0 à 200 pour px, de 0 à 50 pour % et de 0 à 10 pour em et rem, par étapes de nombres entiers. La commutation de l'unité conserve les nombres et échange l'unité, donc 16 px devient 16 %, pas une valeur convertie.
Pourquoi un grand rayon frontalier cesse-t-il de s’arranger ?
Parce que la spécification ne permet pas aux courbes de coin de se chevaucher Lorsque les rayons d'un côté totalisent plus que ce côté et la longueur du n°39 ;, le navigateur réduit chaque rayon de l'élément du même facteur jusqu'à ce qu'ils s'ajustent.
le règle de chevauchement des coins fonctionne comme ceci Pour chacun des quatre côtés, divisez le côté' ; s longueur par la somme des deux rayons qui le touchent Prenez le plus petit de ces rapports, appelez-le f. Si f est inférieur à 1, multipliez chaque rayon par f.
Voici le calcul pour border-radius: 999px sur la zone d'aperçu 224 x 160 :
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Chaque coin se retrouve avec un rayon de 80 px, exactement la moitié de la hauteur de 160 px, donc les extrémités courtes deviennent des demi-cercles parfaits La même chose se produit à 200 px, le haut du curseur de pixels : f est 160 /400 = 0,4, et 200.0,4 est à nouveau 80 px Au-delà de la moitié du côté le plus court, un rayon de pixel cesse de changer quoi que ce soit.
Deux résultats pratiques suivent Un bouton de pilule peut utiliser n'importe quelle valeur de pixel très grande, et il reste une pilule à n'importe quelle largeur Et comme la mise à l'échelle est proportionnelle sur les quatre coins, un seul coin surdimensionné réduit également les autres Réglez en haut à gauche sur 999 px et laissez le reste à 20 px, et les coins 20 px sont réduits avec.
Comment fabriquez-vous des formes communes avec le rayon frontière ?
La plupart des formes arrondies dans les interfaces proviennent d'une poignée de recettes Le générateur a des préréglages pour les courantes.
| Forme | CSS | notes |
|---|---|---|
| Droite | border-radius: 0px; |
La valeur par défaut pour la plupart des éléments |
| Subtil | border-radius: 6px; |
Entrées, petits boutons |
| Carte | border-radius: 12px; |
Panneaux et cartes |
| Arrondi | border-radius: 16px; |
Le générateur' ;s valeur de départ |
| Pilule | border-radius: 999px; |
Fonctionne à n'importe quelle largeur via une mise à l'échelle de chevauchement |
| Cercle | border-radius: 50%; |
A besoin d'une largeur et d'une hauteur égales |
| Feuille | border-radius: 0px 24px; |
Deux coins opposés arrondis |
| Blob | border-radius: 60% 40%; |
Forme organique à partir de pourcentages inégaux |
| Bulle d'élocution | border-radius: 16px 16px 16px 0px; |
Un coin pointu près de l'enceinte |
| Onglet | border-radius: 8px 8px 0px 0px; |
Haut arrondi, fond plat |
Cercle. Définir 50% sur un élément de largeur et de hauteur égales Pour les avatars, ajouter aspect-ratio: 1 et object-fit: cover sur l'image, une photo non carrée ne s'étire pas en ellipse.
Pilule. Utiliser une grande valeur de pixel plutôt que 50%. Sur un bouton large, 50% produit une ellipse aux extrémités pointues, car le rayon horizontal est la moitié de la largeur. 999px est plutôt réduit à la moitié de la hauteur, donnant des extrémités rondes.
Blob. Le préréglage 60% 40% définit le haut-gauche et le bas-droit à 60 % et les deux autres à 40 % Sur la boîte d'aperçu, les rayons horizontaux le long du bord supérieur sont 134,4 px et 89,6 px, qui totalisent exactement 224 px, donc aucune mise à l'échelle ne se produit et les deux courbes ne se rencontrent avec aucun bord droit laissé entre elles Les préréglages peuvent dépasser la plage du curseur : Blob utilise 60 %, Pill utilise 999 px, et la sortie conserve ces valeurs jusqu'à ce que vous déplacez un curseur.
Bulle de parole et onglet. Aucune des deux formes n'a de paire diagonale correspondante, donc les deux ont besoin des quatre valeurs Définissez les coins individuellement dans le générateur et cela confirme qu'aucune forme plus courte n'existe.
Quelle est la syntaxe slash en border-radius ?
Une barre oblique sépare les rayons horizontaux des rayons verticaux, de sorte que chaque coin peut être une ellipse non circulaire avec des tailles que vous choisissez directement.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Les valeurs de chaque côté de la barre oblique suivent les mêmes règles de un à quatre que la sténographie normale Le générateur Toolz n'écrit pas de syntaxe de barre oblique : il définit un rayon par coin, qui couvre les cercles, les pilules, les cartes et les blobs Pour les formes d'œufs et les formes de lentilles personnalisées, commencez à partir du générateur & #39 ; s sortir et ajoutez la barre oblique partie à la main.
Pourquoi mes coins arrondis ne sont pas visibles ?
Quand border-radius semble ne rien faire, la cause en est presque toujours une.
| Symptôme | Cause | Correction |
|---|---|---|
| Image ou enfant pokes hors des coins | Les enfants ne sont pas coupés par défaut | Ajouter overflow: hidden au parent arrondi, ou arrondir l'enfant aussi |
| Aucun changement visible du tout | L'élément n'a pas d'arrière-plan, de bordure ou d'ombre | Donnez-lui une couleur d'arrière-plan ou une bordure pour que la forme soit visible |
| Les coins de table restent carrés | border-collapse: collapse sur la table |
manier border-collapse: separate avec border-spacing: 0ou arrondir un emballage |
| Cercle ressemble à un ovale | Largeur et hauteur diffèrent | Définir des dimensions égales ou aspect-ratio: 1 |
| La pilule a des extrémités pointues | Utilisation 50% sur un élément large |
Utilisez une grande valeur px comme 999px |
| Le rayon cesse d'augmenter | Mise à l'échelle du chevauchement | Attendu ; le rayon est coiffé de la moitié du côté le plus court |
| Les coins des éléments intérieurs semblent plus épais | Le rayon intérieur est égal au rayon extérieur à l’intérieur du rembourrage | Définissez le rayon intérieur sur le rayon extérieur moins le rembourrage |
Le dernier est subtil Une carte avec border-radius: 16px et padding: 8px contenir une image avec le même rayon de 16 px semble inégal, car la courbe intérieure devrait être plus serrée Le rayon intérieur qui suit la courbe extérieure est de 16 moins 8, donc 8 px.
Comment le rayon frontière se combine-t-il avec les ombres et les dégradés ?
Les coins arrondis sont rarement expédiés seuls. Une carte a généralement une ombre et souvent un fond dégradé, et les deux suivent automatiquement la forme arrondie.
box-shadow trace la boîte de bordure arrondie, donc une ombre douce sous une carte 12 px a des coins arrondis 12 px sans aucun travail supplémentaire Le générateur d'ombre de boîte aperçoit les ombres sur un élément arrondi, et le guide d'ombre de boîte explique les valeurs de décalage, de flou et de spread qui se cachent derrière elles.
Les fonds, y compris les dégradés, sont également coupés à la forme arrondie. Pour concevoir le remplissage, utilisez le Générateur de gradient CSS; le Guide de gradient CSS parcourt la syntaxe Si la taille du coin doit évoluer avec la fenêtre plutôt que de rester fixe, le Générateur de pinces CSS construit un clamp() valeur que vous pouvez utiliser comme rayon, par exemple une carte qui est 8 px sur les téléphones et 20 px sur les écrans larges.
A l'aide du générateur, étape par étape
- Choisissez un préréglage tels que Carte, Pilule, Cercle ou Blob, ou commencez à partir des coins 16 px par défaut.
- Ajuster les coins. Le coin bascule par défaut vers Indépendant, où chaque curseur ne déplace que son propre coin. Basculez-le sur Linked pour déplacer les quatre ensemble.
- Choisissez une unité : px, %, em ou rem.
- Vérifiez l'aperçu. La boîte de dégradé se met à jour lorsque vous faites glisser, y compris la mise à l'échelle de chevauchement sur de grandes valeurs.
- Copiez le CSS. Le bouton Copier CSS copie le complet
border-radius:déclaration dans sa forme la plus courte.
Tout s'exécute côté client : l'aperçu et le code sont générés par JavaScript dans votre navigateur, rien n'est téléchargé et la page continue de fonctionner hors ligne une fois chargée. Lorsque vous êtes prêt, ouvrez le générateur de rayon de bordure« , définissez vos coins et collez la déclaration directement dans votre feuille de style ».
