STYLE SHEETS

CSS Semicircles and Web Page Headers

In this two-part tutorial, I develop a few approachable examples that show how to use the "border-radius" CSS3 property in a somewhat “unconventional” fashion to render all sorts of circular shapes on a web page. With this technique, you need not deal with multiple (and sometimes heavy) background images.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 28, 2011

TABLE OF CONTENTS:

Are you looking for a simple approach that lets you decorate your HTML elements with a few engaging circular shapes, but don’t want to deal with the burdens and complexities of Photoshop? Then take a look at the “border-radius” CSS3 property. It not only will permit you to render native rounded corners in a snap, but it’ll be your best partner for displaying circles on a web page without using background images.

Of course, the best way to prove the “hidden” functionality provided by “border-radius” is with some concrete, functional code samples. In the first part of this two-part tutorial I developed a few of these samples. They showed how to utilize the property to render first, a basic circle, and then how to place some text inside the figure to increase its semantic meaning within the containing (X)HTML document.

It’s valid to point out, though, that it’s possible to render all sorts of circular shapes easily, simply by tweaking the property’s arguments along with the dimensions assigned to its wrapping element. To demonstrate this, in this last installment I’ll explain how to create appealing semicircles, shadowed circles and even a customizable web page header -- all using only the abilities that “border-radius” provides right out of the box.

Does my proposal sound engaging to you? Then, don’t hesitate any longer; start reading!

CSS “border-radius” Property: Rendering Semicircles

Let’s be frank: dropping some semicircles into a web page won't change or revolutionize your career as a web designer. Nevertheless, the “border-radius” property makes this process so simple that it’s really worth spending a few moments to understand the logic driving it and how to implement it in a concrete way.

That said, take a close look at the following example. It shows how to quickly draw a basic semicircle by using a div as the figure’s container:

<!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>Creating a semicircle with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
/* semicircle */
.semicircle {
     height: 200px;
     width: 100px;
     margin: 0 auto;
     background-color: #AE00AE;
     text-indent: -9999px;
     -moz-border-radius: 100px 0 0 100px;
     -webkit-border-radius: 100px 0 0 100px;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Creating a semicircle with CSS3</h1>
    <div class="semicircle">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="semicircle">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>

As you can see in the above example, the semicircle (in this case drawn by a class that has the same name) has been created by assigning the same radius and width to the target element(s). This simple trick allows us to generate the figure shown in the following image:

That looks pretty appealing, doesn’t it? If you weren’t totally convinced that it was easy to render circular (or semicircular) shapes with the “border-radius” property, the earlier bit of code should make your doubts vanish. But hang on a second! Is this all that can be done with the property? Actually, with some patience and creativity, you can create more sophisticated circles, or combinations of them, that look really attractive.

To illustrate this point, in this following segment I’ll be setting up a couple of additional examples. They will show how to add shadows and borders to a basic circle, and how to use this approach in the construction of an image-less web page header.

To see how this will be accomplished, just click on the link below and keep reading.

Next: Adding shadows, Borders and Positioning to CSS Circles >>