How can i make a simple ring around a circle in styled component [closed]-CodePudding

I am trying to make a simple ring around a circle in styled component but couldn't do please help...

CodePudding user response：

.ring_container {
  padding:2px;  //space between the ring and circle;
  border:1px solid red;
  border-radius: 50%;
  height:150px;
  width: 150px
}
.ring {
  height:100%;
  width:100%;
  background-color:red;
  border-radius: 50%
}

<div class="ring_container">
  <div class="ring"></div>
</div>

CodePudding user response：

i dont understand your question. kindly check this solution if it works

<html>
<head>
<style> 
#example1 {
  border: 20px solid red;
  padding: 1px;
  border-radius: 50%;
  background-color: orange;
}

#main {
  border: 1px solid red;
  margin: 10px;
  border-radius: 50%;
  background-color: blue;
}

</style>
</head>
<body>

<div id="example1">
    <div id="main">
        <p>hello</p>
    </div>
</div>

</body>
</html>