How to create a circle inside a circle using css? [closed]-CodePudding

I am fairly new to css. I want to make concentric circles. How to do it using css? I can create 2 circles separately. I have used position: absolute

Thanks for any help.

CodePudding user response：

Border is a way. but if you want to make another circle, you need something like this

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .outer {
            display: grid;
            place-items: center;
            background-color: skyblue;
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }
        .inner {
            background-color: lightgreen;
            height: 150px;
            width: 150px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

CodePudding user response：

The easiest way would be to make use of a border that is half the width and height of your element itself, in combination with a border-radius that is the full width and height of your element:

.circle {
  width: 20px;
  height: 20px;
  border: 10px solid black;
  border-radius: 20px;
}

<div class="circle"></div>

CodePudding user response：

.outer{
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #eee;
}
.first-circle{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
}

.second-circle{
  width: 90%;
  height: 90%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: black;
}

<div class="outer">
  <div class="first-circle"></div>
  <div class="second-circle"></div>
</div>

CodePudding user response：

Next time please try to google about it before submit a question, and please you can close this request now.

  

     body{ 
    display: flex; 
    height: 100vh;
    justify-content: center; 
    align-items: center; 
    }
  

span {
        border: solid 1px transparent;
        border-radius: 50%;
        box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 20px green, 0px 0px 0px 30px yellow, 0px 0px 0px 40px blue, 0px 0px 0px 50px skyblue, 0px 0px 0px 60px pink;
        width: 100px;
        height:100px;
        margin: 3em;
        }

<div class"container"> <span></span></div>