Need to draw Circle with CSS like this [duplicate] - html

Question

This question already has answers here:
Border radius circle
(6 answers)
how to put img inside circle in html and css?
(4 answers)
Closed 12 months ago.
Need to draw circle onto which I place image icon like this by applying CSS as shown in image below. Tried the code but unable to accomplish it. Please help.
Required:
HTML:
.dot {
height: 505px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>

Answer 1

i have create as you want. please check. if this helpful please hit the green check. thanks
.dot {
height: 200px;
width: 200px;
background-color: #fff;
border-radius: 50%;
border: 5px solid grey;
display: inline-block;
text-align:center;
}
.dot h3 {
font-size: 23px;
margin:0;
}
.dot-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
.dot2 {
display: table;
}
.dot-box2 {
display: table-cell;
vertical-align: middle;
}
<h2>
Circle With Flex
</h2>
<div class="dot">
<div class="dot-box">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
<h3>
MEMBER FEATURE
</h3>
</div>
</div>
<br>
<h2>
Circle With Table
</h2>
<div class="dot dot2">
<div class="dot-box2">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
<h3>
MEMBER FEATURE
</h3>
</div>
</div>

Answer 2

Make the width and height the same
.dot {
height: 50px;
width: 50px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>

Answer 3

For A Circle, Height and Width should be same.
.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
// Below Code is For Placing content in the Center of Circle
display: flex;
flex-direction:column;
justify-content: center;
align-items:center;
}
<div class="dot">
<div class="content">
<h1>Round Dots / Circles</h1>
</div>
</div>

Answer 4

Height should be same as width.
.dot {
height: 505px;
width: 505px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>

Answer 5

Here is the code pen link:
https://codepen.io/wahabshah/pen/YzELexr
.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
border: 5px solid grey;
display: inline-block;
}
Also for inside content use display : flex and use column for displaying them vertically.

Answer 6

Height and width must be equal to form a circle and border-radius of 50%