Comment créer un cercle avec deux bordures

Le style d'un div en un cercle avec deux bordures de manière réactive peut être réalisé avec CSS. Le CSS div du cercle d'origine fourni peut être modifié pour créer l'effet souhaité :

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

Ici, la propriété box-shadow est utilisée pour créer une deuxième bordure autour du cercle. Les valeurs 0 0 0 5px définissent le décalage, le flou et la répartition de l'ombre, tandis que le rouge spécifie la couleur de la bordure.

L'approche div interne mentionnée dans la question peut être implémentée avec un div supplémentaire à l'intérieur du cercle div :

Le div interne peut être stylisé avec une couleur d'arrière-plan et aligné verticalement à l'aide de flexbox :

div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}