Home arrow JavaScript arrow Page 4 - Building Rounded Corners With CSS and JavaScript
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 / 44
January 03, 2005
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Rounded Corners With CSS and JavaScript - Working with fixed boxes
(Page 4 of 6 )

If we’re working with a “fixed layout” where the width of the element to which we’re applying rounded corners is fixed, let’s say 300 pixels, then we can easily create two different images: one applied to the top section of the box, and the other to the bottom section, respectively. Next, we nest the containing elements to achieve the desired effect. Let’s see the following example to understand this technique.

First off, let’s declare our style rules:

<style type="text/css">
.rounded {
  width: 300px;
  background: #00f url(imgbottom.gif) no-repeat bottom center;
  padding-bottom: 40px;
}
div.rounded h2 {
  background: transparent url(imgtop.gif) no-repeat top center;
  padding-top: 40px;
}
</style>

Then, let’s write our markup:

<div class="rounded">
<h2>Title section here</h2>
<p>More content</p>
<p>More content</p>
<p>More content</p>
</div>

We’ve defined a class named “rounded,” and its width is set to 300px (fixed size). A background image is set to locate at the bottom section of the element. With the next rule, we’re defining that any h2 element contained within the “rounded” div class will have a background image located at the top of that <h2> tag.

Since the <h2> element is located on the top of the box, it’s easy to apply a background image that obviously will be positioned at the top of the <h2> element, and apply the other image to the bottom of the containing <div>. Our rounded corner effect is finally achieved.

The visual output for this technique is presented below:

Building rounded corners with CSS and JavaScript

The above explanation would be incomplete without the corresponding background images used for the top and the bottom section of the box. Here they are:

The top image:

Building rounded corners with CSS and JavaScript

and the bottom image:

Building rounded corners with CSS and JavaScript

That looks pretty good, right? The same effect is reached with CSS and minimal markup, due to its excellent capabilities for manipulating background images.

As said so many times, a picture is worth thousand words, so let’s see a simple diagram that shows how the above technique works, for the sake of clarity:

Building rounded corners with CSS and JavaScript

Documents that contain a well-defined structure, properly built to maintain the correct page’s hierarchy, are great for this technique, achieving high-impact visual effects for multiple page elements while keeping the correct internal markup structure.

Building rounded corners with four different backgrounds is our final goal, so let’s present another technique for getting a little bit closer to our main purpose.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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