Home arrow JavaScript arrow Page 5 - Building Rounded Corners With CSS and JavaScript

Building Rounded Corners With CSS and JavaScript

Rounded corners give your website a professional, polished look. Unfortunately, the old school way of building rounded corners is rather messy and involves a lot of redundant markup. This article explains a much cleaner way of achieving the same effect.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 58
January 03, 2005
  1. · Building Rounded Corners With CSS and JavaScript
  2. · Our old friendly tables
  3. · The CSS approach
  4. · Working with fixed boxes
  5. · Nesting div elements
  6. · Using the DOM approach

print this article

Building Rounded Corners With CSS and JavaScript - Nesting div elements
(Page 5 of 6 )

If applying four backgrounds images is our objective, a logical solution would be nesting four <div> elements, each containing the proper background, corresponding to every rounded corner. Doing it that way surely solves our problem quickly, but it introduces a lot of additional markup without adding any structural value.

Here’s the markup for doing so:

<div class="rounded"><div><div><div>
Content Goes Here

And, the CSS code:

<style type="text/css">
.rounded {
  width: 300px;
  background: #00f url(tl.gif) no-repeat top left;
.rounded div {
  background: transparent url(tr.gif) no-repeat top right;
.rounded div div {
  background: transparent url(bl.gif) no-repeat bottom left;
.rounded div div div{
  background: transparent url(br.gif) no-repeat bottom right;
  padding: 40px;


It’s pretty easy to know what’s going on with this technique. Each of the four divs applies a rounded corner background image, positioned in the top left, top right, bottom left and bottom right corners respectively. Also, we’ve set the width of the containing <div> to be 300px. But it could be easily switched to another, different value, probably in percentage, being useful and flexible enough for use with “liquid design” approaches. Our rounded corners should work without having to worry about the width of the containing <div>.

The visual output is the following:

Building rounded corners with CSS and JavaScript

As we’ve done previously, we’ll show a simple diagram to demonstrate how this technique works:

Building rounded corners with CSS and JavaScript

Finally, we have found an acceptable solution to the problem. In comparison to the table based example, it uses far less markup. So, we’re happy, right? Not quite yet. While this is an acceptable approach, certainly, it’s not very efficient. We’re still adding three additional divs to the document, with no useful value to its structure. We need a better way to tackle the problem, and the answer is to look at the DOM (Document Object Model) and JavaScript, for dynamically altering a Web document’s structures. That’s the subject for the next section.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

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 

Developer Shed Affiliates


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