Home arrow Style Sheets arrow Drawing Circular Shapes with CSS3 and Border Radius
STYLE SHEETS

Drawing Circular Shapes with CSS3 and Border Radius


In this first part of a two-part tutorial, I demonstrate how easy it is to drop a few circles on a web page, thanks to the “border-radius” property.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
December 21, 2011
TABLE OF CONTENTS:
  1. · Drawing Circular Shapes with CSS3 and Border Radius
  2. · Creating Circles with the CSS Border-Radius Property

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials