Como criar um círculo com duas bordas

Estilizar uma div em um círculo com duas bordas de forma responsiva pode ser realizado com CSS. O CSS div do círculo original fornecido pode ser modificado para criar o efeito desejado:

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

Aqui, a propriedade box-shadow é usada para criar uma segunda borda ao redor do círculo. Os valores 0 0 0 5px definem o deslocamento, o desfoque e a propagação da sombra, enquanto o vermelho especifica a cor da borda.

A abordagem de div interna mencionada na pergunta pode ser implementada com uma div adicional dentro do círculo div:

A div interna pode ser estilizada com uma cor de fundo e alinhada verticalmente usando flexbox:

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

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