How To Draw A Circle In CSS? – CSS Code To Draw A Circle

Here you will see how to draw a circle using CSS.

Drawing circle using CSS code is very easy. There is a trick in CSS which can be used to draw a circle and it is so easy and simple tricks. To draw a circle, you have to use CSS3 border-radius property keeping the element height and width same.

The CSS Code

Here is the CSS code which draws the circle:

.css-circle {
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
   border-radius: 50%;
   border: solid 1px green;
}

The above CSS code will draw a circle that looks like below:

In the CSS code, we have kept the height and width of the div element same. The CSS border-radius property is given 50%. To identify the circle we have used the border color green. You can see the circle with green border color above.

The Right Way Of Adding Custom CSS On WordPress

CSS Circle With Solid Background Color

Now if you want a circle with a solid background color in CSS, then you just have to set background color instead of border color. Below is the CSS code which will do that:

.css-circle {
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
   border-radius: 50%;
   background: green;
}

Now you will get a circle that looks like below:

CSS Circle With Both Border Color And Solid Background Color

Below is the CSS code which will draw a circle with solid green background color with a red border:

.css-circle {
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
   border-radius: 50%;
   border: solid 4px red;
   background: green;
}

Below is the circle for the above CSS code:

---

I hope the code snippets you see in this post will be helpful to you. Now try it yourself and run the code on your browser and see if you are able to see the circles or not. I hope you have understood this tutorial. If you have any problem in understanding then let me know, please.

One response to “How To Draw A Circle In CSS? – CSS Code To Draw A Circle”

1. nima says:

   December 20, 2019 at 2:00 am

   perfect code

   Thank you 🙂

   Reply