Cours CSS / bordures, coins arrondis et ombres

Les bordures CSS définissent le bord visible d’une boîte, border-radius arrondit ses coins, et box-shadow ajoute une ombre sans augmenter sa taille de mise en page. Les ombres peuvent encore être coupées par les paramètres de débordement d’un ancêtre, et une bordure arrondie ne recadre pas automatiquement tous les enfants.

Définir la largeur, le style et la couleur de la bordure

.card { border: 2px solid #3d6b89; }

Le raccourci border combine largeur, style et couleur. solid trace une ligne continue, dashed trace des tirets, et dotted trace des points. Un style none supprime la bordure attendue même si une largeur et une couleur sont présentes. Utilisez border-bottom ou border-block-end lorsque seule une bordure d'un côté est nécessaire. Pour plus de détails, voir Le modèle de boîte CSS : contenu, padding, bordure et marge.

Avec une largeur border-box fixe, l'augmentation de l'épaisseur de la bordure réduit l'espace intérieur tout en gardant la largeur extérieure. Une bordure décorative ou une ombre a un rôle différent de celui du contour de focus qui identifie la cible actuelle du clavier. Gardez cet indicateur visible. Voir MDN : border.

Comparer les longueurs et pourcentages des coins

.round { border-radius: 12px; }

.circle { width: 80px; height: 80px; border-radius: 50%; }

.oval { width: 160px; height: 80px; border-radius: 50%; }

Une valeur de longueur telle que 12px spécifie le rayon des coins. Vous pouvez donner des valeurs différentes aux quatre coins, mais comparez-les d'abord à une valeur unique. Si vous appliquez 50% à une boîte ayant la même largeur et la même hauteur, elle ressemblera à un cercle, et si les tailles horizontale et verticale sont différentes, elle ressemblera à une ellipse. Le rayon horizontal du pourcentage est basé sur la largeur, et le rayon vertical est basé sur la hauteur.

Les coins arrondis du parent ne recadrent pas automatiquement l'image enfant. Choisissez entre donner le border-radius à l'image elle-même ou couper le débordement du parent, selon votre objectif. Si vous appliquez overflow: hidden au parent, l'affichage de l'ombre/le focus de l'enfant peut également être coupé au niveau de la bordure. La comparaison suivante distingue quelle boîte est coupée. Vous pouvez vérifier le calcul du rayon dans la description de border-radius de MDN.

Lire les valeurs d'ombre

.shadow { box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }

Les deux premières longueurs sont obligatoires et le flou et l'expansion peuvent être omis. Le rayon de flou ne peut pas être négatif. L'ajout de inset correspond à l'ombre intérieure, la valeur par défaut est l'ombre extérieure. Il existe également un moyen d'ajouter plusieurs ombres, mais vérifiez d'abord en modifiant séparément le déplacement et la taille d'une ombre.

Une ombre ne réserve pas d'espace dans la mise en page. Elle ne repoussera pas une carte suivante en fonction de la largeur de son flou ou de son expansion. Les grandes ombres peuvent masquer le contenu à proximité, il est donc nécessaire de fournir un espacement réel avec des marges ou des écarts de disposition lorsque cela est nécessaire. Voir MDN : box-shadow.

Trouvez l'ancêtre qui découpe une ombre

.frame { padding: 12px; overflow: visible; }

.frame.clip { overflow: hidden; }

.frame .card { box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }

Les deux dernières cartes ont des parents .frame distincts. Leurs ombres d'enfant sont identiques, mais un parent permet le débordement visible tandis que l'autre le coupe. L'ombre dépasse le padding de 12px du parent, donc la version avec overflow: hidden la coupe à la frontière du parent. Inspectez cet ancêtre lors du diagnostic d'une ombre coupée. Voir overflow, retour à la ligne et points de suspension en CSS.

Distinguez overflow: hidden appliqué à la carte elle-même du débordement masqué sur son parent. Cet exercice est une situation où un parent coupe l'ombre extérieure d'une carte enfant. Si l'ombre n'est pas visible sur la page réelle, vous devriez vérifier non seulement la valeur de la carte elle-même, mais aussi l'overflow et la bordure de l'élément parent.

Exécutez l'exemple et comparez les changements

Enregistrez le code ci-dessous en UTF-8 dans borders.html. Les comparaisons de bordures, coins arrondis, ombres externes, ombres internes, cercles et ellipses, et troncatures sont toutes incluses.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing borders, corners, and shadows</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 16px/1.6 sans-serif; background: #f6f8fa; }
    .card { width: 100%; max-width: 320px; margin-block: 24px; padding: 20px; background: white; }
    .border { border: 2px solid #3d6b89; }
    .round { border: 2px solid #3d6b89; border-radius: 12px; }
    .shadow { border-radius: 12px; box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }
    .inset { box-shadow: inset 0 0 12px 2px rgb(0 0 0 / 20%); }
    .shape { width: 80px; height: 80px; margin-block: 16px; border-radius: 50%; background: #6eb898; }
    .oval { width: 160px; }
    .frame { width: 100%; max-width: 320px; padding: 12px; margin-block: 24px; background: #dce8f1; overflow: visible; }
    .frame .card { margin: 0; max-width: none; height: 100px; box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }
    .clip { overflow: hidden; }
  </style>
</head>
<body>
  <h1>Card boundaries and shadows</h1>
  <div class="card border">Card with a border only</div>
  <div class="card round">Border and rounded corners</div>
  <div class="card shadow">Outer shadow</div>
  <div class="card inset">Inset shadow</div>
  <h2>50% Edges: Circles and Ovals</h2><div class="shape" role="img" aria-label="80×80 circle"></div><div class="shape oval" role="img" aria-label="160×80 ellipse"></div>
  <h2>Parent: overflow: visible</h2><div class="frame"><div class="card">Child shadow visible outside the parent</div></div>
  <h2>Parent: overflow: hidden</h2><div class="frame clip"><div class="card">Child shadow clipped at the parent boundary</div></div>
</body>
</html>

1. Changez l’épaisseur de la bordure dans .border de 2px à 8px. Dans les fenêtres larges, assurez-vous que la largeur externe est maintenue et que l'espace interne est réduit, puis revenez à 2px.
2. Changez la largeur de .shape de 80px à 160px. Assurez-vous que le cercle devienne une ellipse si vous maintenez la hauteur à 80px. Restaurez la largeur originale.
3. Changez le décalage horizontal de .shadow à 20px et le décalage vertical à -8px. Gardez le flou à 24px et comparez uniquement la direction du mouvement. Ensuite, changez le flou à 0, comparez-le au bord net, puis ramenez-le à sa valeur originale.
4. Remplacez le rayon d’étalement de 4px par -4px et observez la diminution de l’ombre. Dans le deuxième .frame, remplacez overflow: hidden par overflow: visible pour faire réapparaître la partie extérieure de l’ombre, puis rétablissez hidden.

Si l'ombre est floue, vérifiez l'opacité de la couleur et le contraste de l'arrière-plan, et si un seul côté est coupé, vérifiez la bordure et le débordement du parent. Si le contenu enfant à l'intérieur du coin dépasse, nous comparons également la méthode consistant à donner des coins arrondis à l'enfant lui-même. Choisissez les effets en veillant à conserver un contenu lisible et des commandes faciles à utiliser.