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