Using CSS3 to create graphics and shapes has been a growing trend for the past few years. You can leverage this simple technique to create a simple circle rather than having to cut a graphic for it. Check out some examples below.
CSS:
[css]</p>
<p>.circle1 {<br />
width:100px;<br />
height:100px;<br />
background:#f00;<br />
border-radius:50%;<br />
}<br />
.circle2 {<br />
width:50px;<br />
height:50px;<br />
background:#0f0;<br />
border-radius:50%;<br />
}<br />
.circle3 {<br />
width:200px;<br />
height:200px;<br />
background:#fff;<br />
border:1px solid #000;<br />
text-align:center;<br />
line-height:200px;<br />
border-radius:50%;<br />
}</p>
<p>[/css]
HTML:
[html]</p>
<p>&lt;div class=&quot;circle1&quot;&gt;&lt;/div&gt;<br />
&lt;div class=&quot;circle2&quot;&gt;&lt;/div&gt;<br />
&lt;div class=&quot;circle3&quot;&gt;Hello!&lt;/div&gt;</p>
<p>[/html]
Result:
The border-radius property works in all current versions of major browsers including: Firefox, Chrome, Safari, Opera, and IE9. Check out the details on W3Schools.