Signup for our Newsletter!

Signup below to receive all of Biznet's tips and newsletters delivered right to your inbox!

CSS: How to Make a Circle Using Rounded Corners

CSS: How to Make a Circle Using Rounded Corners

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><div class="circle1"></div><br />
<div class="circle2"></div><br />
<div class="circle3">Hello!</div></p>
<p>[/html]

Result:

casino online #0f0; border-radius: 50%;”>
Hello!

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.