Cómo crear un círculo con dos bordes

Se puede diseñar un div en un círculo con dos bordes de forma responsiva con CSS. El CSS div circular original proporcionado se puede modificar para crear el efecto deseado:

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 */
}

Aquí, la propiedad box-shadow se usa para crear un segundo borde alrededor del círculo. Los valores 0 0 0 5px definen el desplazamiento, el desenfoque y la extensión de la sombra, mientras que el rojo especifica el color del borde.

El enfoque de div interno mencionado en la pregunta se puede implementar con un div adicional dentro del círculo div:

El div interno puede diseñarse con un color de fondo y alinearse verticalmente usando flexbox:

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

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