Rounded Corners 2

By Vic Phillips on Feb 9, 2007


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.


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;

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


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


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


Paste this code into the BODY section of your HTML document