How to Make One Circle Inside of Another Using CSS

How to make one circle inside of another using CSS

Ta da!

Explained in the CSS comments:

 #outer-circle {

   background: #385a94;

   border-radius: 50%;

   height: 500px;

   width: 500px;

   position: relative;

   /* 

    Child elements with absolute positioning will be 

    positioned relative to this div 

   */

 }

 #inner-circle {

   position: absolute;

   background: #a9aaab;

   border-radius: 50%;

   height: 300px;

   width: 300px;

   /*

    Put top edge and left edge in the center

   */

   top: 50%;

   left: 50%;

   margin: -150px 0px 0px -150px;

   /* 

    Offset the position correctly with

    minus half of the width and minus half of the height 

   */

 }

<div id="outer-circle">

  <div id="inner-circle">

  </div>

</div>

Creating 4 circles inside each other using css

Here you go. This should help you get started.

.circle {

  border-radius: 50%;

  background: transparent;

  border: 2px solid red;

  width: 500px;

  height: 500px;

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

}

.c2 {

  width: 400px;

  height: 400px;

  border-color: blue;

}

.c3 {

  width: 300px;

  height: 300px;

  border-color: yellow;

}

.c4 {

  width: 200px;

  height: 200px;

}

<div class="circles">

  <div class="circle c1">

    <div class="circle c2">

      <div class="circle c3">

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

      </div>

    </div>

  </div>

</div>

How to create a circle inside a circle dynamically (like a donut)

height and width will be added dynamically for child items in % and it will be centered automatically by adding circle class

Try changing child width and height it will stay in center

Ping me if you need further explanation.

.wraper {

  width: 60px;

  height: 60px;

}

.circle {

  display: flex;

  align-items: center;

  border: 1px solid red;

  border-radius: 50%;

}

.empty-wheel-outer {

  width: 100%;

  height: 100%;

}

.empty-wheel-inner {

  width: 50%;

  height: 50%;

  margin: auto;

}

<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div class="wraper">

    <span class="circle empty-wheel-outer">

      <span class=" circle empty-wheel-inner"></span>

    </span>

    <div/>

  </div>

</body>

</html>

How make 3 circle one inside another with different opacity

You can use multiple box shadow to insert faded circles

body {

  background-color: teal !important;

  padding: 100px;

}

.circle {

  position: relative;

  /*just for centering inner content*/

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 auto;

  /**********************************/

  width: 350px;

  height: 350px;

  background: white;

  border-radius: 50%;

  /*u can add as many box shadows u want*/

  box-shadow: 0 0 0px 13px rgba(255, 255, 255, 0.50), 0 0 0px 25px rgba(255, 255, 255, 0.50);

}

.inner {

  position: relative;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="circle">

  <div class="inner row">

    <div class="col-12 text-center">Text Text Text</div>

    <div class="col-6 text-center">

      <div><img src="http://via.placeholder.com/80x150"></div>

    </div>

    <div class="col-6 d-flex flex-column justify-content-center text-center">

      <div>Text Here</div>

      <div><img src="http://via.placeholder.com/80x30"></div>

      <div><img src="http://via.placeholder.com/80x30"></div>

    </div>

  </div>

  <div>

How to place a circle inside a square box in css?

Add a new element and style with css. This way you can include content and images inside it.

.rectangles .rectangle {

    border-radius: 10px;

    display: inline-block;

    margin-bottom: 30px;

    margin-right: 5px;

    width: 350px;

    height: 100px;

    border: 1px solid #000;

    background-color: white;

    padding: 10px 10px 10px 100px;

    position: relative;

}

.rectangles .rectangle .circle {

  background: #aaa;

  border-radius: 100%;

  height: 60px;

  width: 60px;

  position: absolute;

  top: 20px;

  left: 20px;

}

<div class="rectangles">

    <div class="rectangle">

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

        <p class="ceo">Will's profile, CEO</p>

        <p class="ceo-words">Say something inspiring will</p>

    </div>

    <div class="rectangle">

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

        <p class="cfo">Jacks Profile, CFO</p>

        <p class="cfo-words">Say something inspiring jack</p>

    </div>

    <div class="rectangle">

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

        <p class="cto">Zeeshan, CTO</p>

        <p class="cto-words">Say something inspiring </p>

    </div>

    <div class="rectangle">

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

        <p class="future">Whoever yall hire next</p>

        <p class="future-words">Say something inspiring </p>

    </div>

</div>

Not able to align concentric inner circle inside my outer div

One of the solutions would be to use absolute positioning:

.outer-circle {

  width: 200px;

  height: 200px;

  background-color: coral;

  border-radius: 50% 50% 0 0;

  transform: rotate(90deg);

  position: relative;

}

.inner-circle {

  width: 100px;

  height: 100px;

  background-color: blue;

  border-radius: 50%;

  position: absolute;

  top: 50%;

  right: 50%;

  transform: translate(50%, -50%);

}

<div class="outer-circle">

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

</div>

How to put bull inside css circle

Don't use characters, create it by css:

HTML:

<div class="eye"></div>

CSS:

.eye{
  border: 2px solid red;
  border-radius: 100%;
  position: relative;
  width: 2em; height: 2em;
}
.eye::before{
  content: "";
  display: block;
  position: absolute;
  width: 1em; height: 1em;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: red;
  border-radius: 100%;
}

http://codepen.io/anon/pen/ZOaBKg

How to Make One Circle Inside of Another Using CSS