Drawing Circular Shapes with CSS3 and Border Radius (Page 1 of 2 )
Since they made their triumphal appearance on the stage of web design, some CSS3 properties have become the favorite tools of many designers because of the functionality they offer right out of the box. Many of these properties make it much easier to build eye-catching web pages that (hopefully) keep users engaged.
While there's nothing wrong with using these properties in a "conventional" way, it's fun to take CSS3 to the next level by using the properties in a more “atypical” fashion. Doing this allows you, among other things, to create quite appealing effects.
That’s exactly the case with the popular "border-radius" property. As you know, this property permits you to render rounded corners in a jiffy, without using a bunch of background images. Although there’s nothing inherently wrong with this approach, there’s another interesting facet of the property: when it gets assigned larger values, it can be used to build all sorts of circular shapes in a pretty simple and straightforward way.
Most modern browsers provide decent support for the “border-radius” property. Unfortunately, Internet Explorer is (again) the bad kid on the block and flagrantly ignores it.
Having clarified that point, in this first part of a two-part tutorial, I’ll be developing some graspable examples that will demonstrate how to create a few attractive circular shapes in a snap, thanks to the clever manipulation of the "border-radius" property.
Getting Started: Building a Sample Web Page
As I said at the beginning, the “border-radius” property can be the perfect ally for drawing circular shapes on a web page. However, such claims must be backed up with concrete, functional code, right? In line with this concept, the first step that I’m going to take will consist of creating a basic web page, whose structure you can see below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drawing circles with CSS3</title> </head> <body> <div id="wrapper"> <h1>Drawing circles with CSS3</h1> <div class="circle">This is a sample circle</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> <div class="circle">This is a sample circle</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> </body> </html>
If I had to describe the above web page, I’d say that it’s … very primitive. Regardless, you’ll surely have noticed that it includes a couple of divs, which have been assigned a still undefined class called “circle.” Well, there’s no need to be a rocket scientist to realize that I’ll be using these elements to create the aforementioned circular shapes.
The full details concerning this creation process will be discussed in depth in the following section. Just click on the link below and keep reading.
Style Sheets 
CSS Semicircles and Web Page Headers
