Rounded Corners 2 | JavaScriptSource

Rounded Corners 2

Vic Phillips Feb 9, 2007

General

This script permits rounded corners to be applied to DIV elements. The corners and associated edges are added to the initial DIV dimensions. There may be as many applications on a page as needed.





Notes

All variable, function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts. This prefix can be safely changed to characters of choice using global find and replace.

The requirement for the rounded corners is defined within the DIV class attribute as a fake rule. Note that more than one rule may be specified in a class attributeso long as the rules are separated by a space.

The 'corner rule' is to be specified as in the example:


  <div id="tst2" class="tst zxc,Rad20,Border2#FFCC66,
    TLTR,Opacity50" style="width:200px;height:100px;
      left:280px;top:100px;">

where 'zxc' allows the script to recognise that rounded corners are to be applied. The balance defines the corner features, each feature separated by a comma:

  • Rad = the radius of the corners.
  • Border = (optional) the border size and color.
  • TLTRBLBR = (optional) the corners to apply the rounded corner, LT = Top Left etc. The default is all corners.
  • Opacity = (optional) the opacity id the DIV including corners.

Note that if the DIV inline border style attribute is defined in the DIV tags, the border will be applied to all four corners unless otherwise specified in the DIV fake class rule.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: roundedCorners.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(11 comments)

Hmm.. it doesn't work with widths in percent.

Steamboat Sep 28, 2008

You need to check your security settings for IE7. It works fine for me.

Lee May 25, 2007

works perfectly in firefox2, but it generates activeX warning messages in IE7

blogger tools Apr 17, 2007

bottom corners dont render correctly in IE7........but are perfect in Firefox ( need cross browser update)

Paul D Mar 6, 2007

What could be causing jagged edges on the bottom left and right? The border is too long. Otherwise its excellent, and if I have to, I could only use the tops

Phillip Juan McClore Feb 22, 2007