CSS Circle

CSS can be used to create circles.

To create a circle, use the border-radius property with a value equal to one-half of the boxes' width and height dimension. Example:

Here is the source code for that.

<div style="
      width:50px; 
      height:50px; 
      border:1px solid black; 
      border-radius:25px;">
</div>

Both the height and the width are 50 pixels in length. The radius is 25 pixels.

Now, let's give the circle's border and background the color red and a red-ish shadow. (The CSS3 box-shadow property page has more information.)

Here is the source code for the above.

<div style="
      width:100px; 
      height:100px; 
      border:1px solid red; 
      border-radius:50px;
      box-shadow: 5px 5px 5px #f99;
      background-color:red;">
</div>

Both the height and the width have doubled from the first example to 50 pixels in length. And the radius enlarged to 50 pixels. Note that the ratio remains the same – the radius one-half the dimension.

One more example, stacked spheres, a red one and a green one. These are in a div with position:relative, which allows position:absolute to be used to position the spheres.

Here is the source code for that one.

<div style="
      position:relative; 
      height:115px; 
      width:155px;">
   <div style="
         position:absolute;
         left:0px;
         top:0px;
         width:100px; 
         height:100px; 
         border:1px solid #0f0; 
         border-radius:50px;
         box-shadow: 5px 5px 5px #3f3;
         background-color:green;">
   </div>
   <div style="
         position:absolute;
         left:50px;
         top:10px;
         width:100px; 
         height:100px; 
         border:1px solid #f00; 
         border-radius:50px;
         box-shadow: 5px 5px 5px #f99;
         background-color:red;">
   </div>
</div>

To make a sphere, create a div with an equal height and width. Specify the border-radius property as one-half the box dimension.

Will Bontrager