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 / 58
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

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

- 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 
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