How to draw circle using CSS

In this post I will describe how to use border-radius CSS style to draw a circle in your web page. Most important part of the technique is understanding this new border-radius style and what it does.

border-radius syntax

border-radius: top-left top-right bottom-right bottom-left

These values represent radius of the oval or ellipse that will be be used to draw rounded corner at specified location of the box. I will discuss this syntax of border-radius in more details in subsequent post(s). For now it is sufficient to know that these values are radius of the corner.

Draw circle

A circle is a special case of an oval or ellipse where size of major-axis is equal to minor axis. This means if I take a square and set the radius of corners to half the length of a side of square, it becomes a circle. This is exactly how you will draw the circle. The following style is used to draw a circle.

.circleDiv
{
  height:100px;
  width:100px;
  border: 2px solid #005;
  border-radius:50px;
  background-color:#EE5D20;
}

Key points of this technique are:

  • DIV height and width are to be same
  • box-radius value should be half the size of div
comments powered by Disqus

Blog Tags