Home arrow JavaScript arrow Page 3 - 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 - The CSS approach
(Page 3 of 6 )

CSS are great for implementing decorative effects that improve the overall presentation of a Web page. What’s more, they are remarkably powerful for achieving outstanding background effects within pages. Since rounded corners can be implemented as background images, instead of being directly inserted into documents with <img> tags, we’ll see how to make use of CSS extensive capabilities for manipulating background images, and finally obtain our desired effect.

With CSS, a background image can be applied to any element of a page. Backgrounds can be manipulated in several ways to widely expand their visual impact.

They can be repeated horizontally, vertically, or not repeated at all. Also, they can be positioned using absolute or relative measurements, fixed while page elements scroll, and positioned relatively to each corner of the element. A few simple CSS declarations will properly explain this:

/* background image stays fixed */

.fixed {
  background: #eee url(bg.gif) fixed;
}

/* background image repeats in x axis */

.repx {
background: #eee url(bg.gif) repeat-x;
}

/* background image repeats in y axis */

.repy {
background: #eee url(bg.gif) repeat-y;
}

/* background image repeats in x-y axis */

.repxy {
background: #eee url(bg.gif) repeat-x repeat-y;
}

/* background image not repeats */

.norepeat {
background: #eee url(br.gif) no-repeat;
}

/* background image locates at top left corner */

.topleft {
background: #eee url(br.gif) no-repeat top left;
}

/* background image locates at top right corner */

.topright {
background: #eee url(br.gif) no-repeat top right;
}

/* background image locates at bottom left corner */

.bottomleft {
background: #eee url(br.gif) no-repeat bottom left;
}

/* background image locates at bottom right corner */

.bottomright {
background: #eee url(br.gif) no-repeat bottom right;
}

Each CSS declaration rule shows clearly how a background image can be manipulated to obtain different effects. Although this is very basic for experienced designers, it can be handy for beginners.

Whatever great flexibility stylesheets offer to designers, they still have some limitations about implementing background images.

CSS2 imposes a significant limitation: it states that only one background image can be applied to each element of the page. Considering this restriction, we should tackle the problem of rounded corners by applying four different background images to different <div> tags, each corresponding to the corner we need to be rounded. If we’re designing with a “fixed layout” in mind, then we might embed only two images within two block-level elements, for instance <div>, <p> or headers tags, to easily get the rounded corners done.

In the next section, we’ll see those possible alternative solutions.


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