Comment obtenir des coins arrondis à la fois à l’intérieur et à l’extérieur d’une boîte avec CSS ?

Obtenir des coins arrondis à la fois pour l'intérieur d'une boîte et sa bordure

Arrière-plan

Créer des coins arrondis à l’intérieur et à l’extérieur d’une boîte peut améliorer l’attrait visuel d’un design. Cependant, il peut être difficile d’obtenir cet effet sans affecter les frontières des deux éléments. Ce guide explique comment obtenir cet effet souhaité à l'aide de CSS.

Calculs de la bordure intérieure

Pour appliquer des coins arrondis à la boîte intérieure, vous devez calculer le rayon de la bordure intérieure. . Cela se fait en soustrayant la largeur de la bordure du rayon de la bordure extérieure.

• Rayon de la bordure intérieure = Rayon de la bordure extérieure - Largeur de la bordure

Dans ce cas, avec un rayon de bordure externe de 6px et une largeur de bordure de 5px :

• Rayon de bordure intérieure = 6px - 5px = 1px

CSS mis à jour :

.radius-all { border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

Application des bordures générales

Si vous utilisez des boîtes séparées pour la bordure et le contenu intérieur, appliquez la propriété border-radius et son fournisseur- versions spécifiques aux deux boîtes pour des coins arrondis cohérents.

Exemple (Boîtes séparées) :

<div>

Exemple (Boîte unique) :

.rounded-borders {
    border-radius: 5px;
}

<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!