Wir können das CSS wie folgt ändern, um einen Kreis mit zwei Rändern zu erstellen:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

Dieses CSS fügt mithilfe der Box-Shadow-Eigenschaft einen zweiten Rahmen hinzu, der einen 5 Pixel breiten roten Schatten um den Kreis herum erzeugt und so effektiv die Illusion eines zweiten Rahmens erzeugt. Die Farbe des zweiten Rahmens wird durch den Rotwert in der Box-Shadow-Eigenschaft bestimmt.

Das bereitgestellte CSS erzielt den gewünschten Effekt, indem es einen Kreis mit zwei unterschiedlichen Rändern erstellt, der fließend auf Änderungen in der Containergröße reagiert.