Easier Way to Create Circle Div Than Using an Image

Easier way to create circle div than using an image?

Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

To make this work in IE8 and older, you must download and use CSS3 PIE. My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE.htc.

My demo looks like this:

Is it possible to make small circles via CSS?

Have a look at this library:
http://jsdraw2d.jsfiction.com/

For drawing circles there are examples in http://jsdraw2d.jsfiction.com/demo/circleellipse.htm

How to draw circle in html page?

You can't draw a circle per se. But you can make something identical to a circle.

You'd have to create a rectangle with rounded corners (via border-radius) that are one-half the width/height of the circle you want to make.

    #circle {      width: 50px;      height: 50px;      -webkit-border-radius: 25px;      -moz-border-radius: 25px;      border-radius: 25px;      background: red;    }

<div id="circle"></div>

 #outer-circle {   background: #385a94;   border-radius: 50%;   height: 500px;   width: 500px;   position: relative;   /*     Child elements with absolute positioning will be     positioned relative to this div    */ } #inner-circle {   position: absolute;   background: #a9aaab;   border-radius: 50%;   height: 300px;   width: 300px;   /*    Put top edge and left edge in the center   */   top: 50%;   left: 50%;   margin: -150px 0px 0px -150px;   /*     Offset the position correctly with    minus half of the width and minus half of the height    */ }

<div id="outer-circle">  <div id="inner-circle">
  </div></div>