Find how to create Cirlce Using CSS and HTML

Creating Circle using simple CSS which works on all browser like (IE,Mozilla,Safari) , you can change parameters to increase size and change color with addon css.You can find some different ways to create circle using css.

We will show you both ways responsive and full width so that it will be easy for you to create for all devices using simple css trick for circle.

Full Width

First Solutions

.circle:before {
content: ' \25CF'; font-size: 200px;
}

Second Solutions

#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}

To display result 

<span class="circle"></span>

Responsive Circle for all devices

First Solutions

.circle {
  background: #ddd;
  border-radius: 50%;
  height: 0;
  padding-bottom: 100%;
  width: 100%;
}

To display result 

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

Hope this helps you to make perfect responsive circle for your website or a blog using our CSS3.