The JavaScript Source: CSS : Rounded Corners

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

Created by: Vic Phillips
Web Site: http://www.vicsjavascripts.org.uk
Posted: February 9, 2007

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


/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Vic Phillips | http://www.vicsjavascripts.org.uk */
// The math and aliase techniques learnt from a script by
// Cameron Cooke and Tim Hutchison - http://www.curvycorners.net

function zxcCorners(){
 var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
 var zxcary=[];
 for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
  if (zxcdivs[zxc0].className.match('zxc')){ zxcary.push(zxcdivs[zxc0]); }
 }
 for (var zxc1=0;zxc1<zxcary.length;zxc1++){
  zxcCornersMake(zxcary[zxc1]);
 }
}

function zxcCornersMake(zxcobj){
 var zxcstyle=zxcStyleAry(zxcobj);
 zxcOptions(zxcobj);
 var zxcopts=zxcOptions(zxcobj);
 var zxcrary=[zxcopts[0]*1];
 if (zxcopts[1]&&zxcopts[2]){ zxcrary.push(zxcopts[0]+zxcopts[1]); }
 else if (zxcstyle[5]){
  if (zxcstyle[5].match('#')){ zxcrary.push(zxcopts[0]+parseInt(zxcstyle[5].split(' ')[1])); zxcopts[2]='#'+zxcstyle[5].split('#')[1].split(' ')[0]; }
  else { zxcrary.push(zxcopts[0]+parseInt(zxcstyle[5].split('px')[0]));  zxcopts[2]='rgb'+(zxcstyle[5].split('rgb')[1].split(')')[0])+')'; }
 }
 var zxcw=parseInt(zxcstyle[1]);
 var zxch=parseInt(zxcstyle[2])||zxcobj.offsetHeight;
 if (!zxcw){ return; }
 zxcS(zxcobj,{position:(zxcstyle[0]=='static'||!zxcstyle[0])?'relative':zxcstyle[0],borderTop:'0px',borderLeft:'0px', borderRight:'0px', borderBottom:'0px'});
 var zxcbwh=zxcrary[0]+(zxcrary[1])?zxcrary[1]:0;
 if (zxcopts[4]){
  var zxcp=zxcS('DIV',{position:zxcobj.style.position,left:zxcobj.style.left,top:zxcobj.style.top,width:(zxcw+zxcbwh*2)+'px',height:(zxch+zxcbwh*2)+'px'});
  zxcobj.parentNode.replaceChild(zxcp,zxcobj);
  zxcp.appendChild(zxcobj);
  zxcS(zxcobj,{left:zxcbwh+'px',top:zxcbwh+'px'});
 }
 for (var zxc0=0;zxc0<zxcrary.length;zxc0++){
  var zxccary=[];
  var zxcclone=zxcS(zxcobj.cloneNode(false),{position:'absolute',overflow:'hidden',zIndex:1+zxc0+'',width:'0px',height:'0px',left:'0px',top:'0px',backgroundColor:(zxc0==0)?zxcstyle[3]:zxcopts[2]},zxcobj);
  zxccary[0]=zxcS('DIV',{position:'absolute',zIndex:1-zxc0+'',width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px',left:zxcw+'px',top:zxch+'px',border:'solid black 0px'},zxcobj);
  for (var zxc1=0;zxc1<zxcrary[zxc0];zxc1++){
   var zxcht=Math.floor(Math.sqrt(Math.pow(zxcrary[zxc0],2)-Math.pow((zxc1+1),2))-1);
   zxcS(zxcclone.cloneNode(false),{left:zxc1+'px',top:'0px',width:'1px',height:(zxcht+1)+'px'},zxccary[0]);
   for(var zxc1a=(zxcht+1);zxc1a<Math.ceil(Math.sqrt(Math.pow(zxcrary[zxc0],2)-Math.pow(zxc1,2)));zxc1a++){
    zxcS(zxcclone.cloneNode(false),{left:zxc1+'px',top:zxc1a+'px',width:'1px',height:zxcAntiAliase(zxc1,zxc1a,zxcrary)+'px'},zxccary[0]);
   }
  }
  var zxcmary=['BR','BL','TL','TR'];
  for (var zxc2=1;zxc2<4;zxc2++){
   zxccary[zxc2]=zxccary[0].cloneNode(true);
   zxcS(zxccary[zxc2],{left:((zxc2<3)?-zxcrary[zxc0]:zxcw)+'px',top:((zxc2<2)?zxch:-zxcrary[zxc0])+'px'},zxcobj);
   var zxcclds=zxccary[zxc2].childNodes;
   if (zxcopts[3].match(zxcmary[zxc2])){
    for (var zxc2a=0;zxc2a<zxcclds.length;zxc2a++){
     var zxctop=parseInt(zxcclds[zxc2a].style.top);
     var zxclft=parseInt(zxcclds[zxc2a].style.left);
     var zxchte=parseInt(zxcclds[zxc2a].style.height);
     zxcS(zxcclds[zxc2a],{left:((zxc2<3)?(zxcrary[zxc0]-zxclft-1):(zxclft))+'px',top:((zxc2<2)?zxctop:(zxcrary[zxc0]-zxchte-zxctop))+'px'});
    }
   }
  }
  for (var zxc3=0;zxc3<zxcmary.length;zxc3++){
   if (!zxcopts[3].match(zxcmary[zxc3])){ zxcS(zxccary[zxc3].firstChild,{left:'0px',top:'0px',width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px'}); }
  }
  var zxcwh=(zxc0<1)?zxcrary[zxc0]:zxcrary[1]-zxcrary[0];
  for (var zxc4=0;zxc4<4;zxc4++){
   zxcS(zxcclone.cloneNode(false),{left:((zxc4<2)?0:(zxc4<3)?-zxcrary[zxc0]:(zxc0<1)?zxcw:zxcw+zxcrary[0])+'px',top:((zxc4<1)?(zxc0<1)?zxch:zxch+zxcrary[0]:(zxc4>1)?0:-zxcrary[zxc0])+'px',width:((zxc4<2)?zxcw:zxcwh)+'px',height:((zxc4<2)?zxcwh:zxch)+'px'},zxcobj);
  }
 }
 if (zxcopts[4]){ zxcOpacity(zxcp,zxcopts[4]); }
}

function zxcOptions(zxcobj){
 var zxcary=zxcobj.className.split('zxc')[1].split(',');
 var zxcopts=[];
 for (var zxc0=0;zxc0<zxcary.length;zxc0++){
  if (zxcary[zxc0].match('Ra')){ zxcopts[0]=parseInt(zxcary[zxc0].replace(/\D/g,'')); }
  else if (zxcary[zxc0].match('Bo')){ zxcopts[1]=parseInt(zxcary[zxc0].split('#')[0].replace(/\D/g,'')); zxcopts[2]='#'+zxcary[zxc0].split('#')[1]; }
  else if (zxcary[zxc0].match('L')||zxcary[zxc0].match('R')){ zxcopts[3]=zxcary[zxc0]; }
  else if (zxcary[zxc0].match('O')){ zxcopts[4]=parseInt(zxcary[zxc0].replace(/\D/g,''));  }
 }
 zxcopts[3]=zxcopts[3]||'BL,BR,TL,TR';
 return zxcopts;
}

function zxcS(zxcele,zxcstyle,zxcp){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxcp){ zxcp.appendChild(zxcele); }
 return zxcele;
}

function zxcStyleAry(zxcel){
 var zxcsary=['position','width','height','backgroundColor','background-Color','borderTop','borderLeft','borderRight','borderBottom'];
 var zxccary=[];
 for (var zxca=0;zxca<zxcsary.length;zxca++){
  zxccary[zxca]=zxcsary[zxca];
  if (zxcel.style[zxcsary[zxca]]){ zxcsary[zxca]=zxcel.style[zxcsary[zxca]]; }
  else if (zxcel.currentStyle){ zxcsary[zxca]=zxcel.currentStyle[zxcsary[zxca]]; }
  else if (document.getComputedStyle){ zxcsary[zxca]=document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcsary[zxca]); }
 }
 for (var zxcb=0;zxcb<zxcsary.length;zxcb++){ if (zxccary[zxcb]==zxcsary[zxcb]){ zxcsary[zxcb]=null; } }
 zxcsary[3]=zxcsary[3]||zxcsary[4];
 return zxcsary;
}

function zxcAntiAliase(zxcx,zxcy,zxcr){
 var zxcxary=[];
 var zxcyary=[];
 var zxcnu=0;
 var zxcside='';
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcx,2)));
 if (zxccross>=zxcy&&zxccross<zxcy+1){
  zxcside='Left';
  zxcxary[zxcnu]=0;
  zxcyary[zxcnu]=zxccross-zxcy;
  zxcnu=zxcnu+1;
 }
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcy+1,2)));
 if (zxccross>=zxcx&&zxccross<zxcx+1){
  zxcside=zxcside+'Top';
  zxcxary[zxcnu]=zxccross-zxcx;
  zxcyary[zxcnu]=1;
  zxcnu=zxcnu+1;
 }
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcx+1,2)));
 if (zxccross>=zxcy&&zxccross<zxcy+1){
  zxcside=zxcside+'Right';
  zxcxary[zxcnu]=1;
  zxcyary[zxcnu]=zxccross-zxcy;
  zxcnu=zxcnu+1;
 }
 var zxccross=Math.sqrt((Math.pow(zxcr,2)-Math.pow(zxcy,2)));
 if (zxccross>=zxcx&&zxccross<zxcx+1){
  zxcside=zxcside+'Bottom';
  zxcxary[zxcnu]=zxccross-zxcx;
  zxcyary[zxcnu]=0;
 }
 return (zxcside=='LeftRight')?Math.min(zxcyary[0],zxcyary[1])+((Math.max(zxcyary[0],zxcyary[1])-Math.min(zxcyary[0],zxcyary[1]))/2):(zxcside=='TopRight')?(1-(((1-zxcxary[0])*(1-zxcyary[1]))/2)):(zxcside=='TopBottom')?Math.min(zxcxary[0],zxcxary[1])+((Math.max(zxcxary[0],zxcxary[1])-Math.min(zxcxary[0],zxcxary[1]))/2):(zxcside=='LeftBottom')?(zxcyary[0]*zxcxary[1])/2:1;
}

function zxcOpacity(zxcobj,zxcopc) {
 if (zxcopc<0||zxcopc>100){ return; }
 if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
 else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
 else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  zxcCorners();
});






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


.tst {
 background-Color:#FFFFCC;border:solid green 6px;color:#CCFFFF;
}






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



<script type="text/javascript" src="roundedCorners.js"></script>





Body
Paste this code into the BODY section of your HTML document



<div id="tst1" class="tst zxc,Rad30" id="Tst" style="position:relative;width:200px;height:100px;left:300px;top:100px;border:solid #ff0000 5px;"></div>
<br><br><br>
<div id="tst2" class="tst zxc,Rad20,Border2#FFCC66,TLTR,Opacity50" style="width:200px;height:100px;left:280px;top:100px;"></div>














User Comments




Add a comment, suggestion, or correction

   
   
[For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]





Name:    


E-mail:   


URL:       
[optional]


Subject: 
[optional]


Comments:


   
      
      CAPTCHA Verification

Please enter the code displayed to the right in the box below:


          
      

Hear it!
      
      


 
 




Comments feed 

   



11. From: Steamboat
09/29/2008 02:51:26
Hmm.. it doesn't work with widths in percent.


   



9. From: blogger tools
04/17/2007 20:03:55
works perfectly in firefox2, but it generates activeX warning messages in IE7


   



10. From: Lee (Admin)
05/25/2007 11:33:34
You need to check your security settings for IE7. It works fine for me.


   



8. From: Paul D
03/06/2007 14:58:59
bottom corners dont render correctly in IE7........but are perfect in Firefox ( need cross browser update)


   



7. From: Phillip Juan McClore
02/22/2007 10:24:25
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


   



6. From: Michael B
02/16/2007 14:10:45
Nice. If the code/implementation confuses you,  the same thing can be done in CSS with much less code, and it works even with Javascript disabled.


   



5. From: Satyabrata Choudhury
02/15/2007 18:05:55
works on Firefox 2 and IE 7. Excellent script. Thanks.


   



4. From: Kumar S
02/13/2007 01:13:52
The right and left borders are extended in IE7


   



3. From: Amer Neely
02/11/2007 10:01:58
Tried the round corners script in Firefox, IE and Opera. Only Firefox seemed to render it correctly.


   



2. From: Vibhu Bansal
02/10/2007 01:32:34
Amazing script...does away with need to have transparent gif for rounded corners effect.



next comments...





			 


We'll send this script to you!






      
   






Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.





Sign up for the JavaScript Weekly


	
	  
	
	

internet.com Privacy Policy




Contact Us!
   |   
JavaScript Forum

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

11. From: Steamboat
09/29/2008 02:51:26

9. From: blogger tools
04/17/2007 20:03:55

10. From: Lee (Admin)
05/25/2007 11:33:34

8. From: Paul D
03/06/2007 14:58:59

7. From: Phillip Juan McClore
02/22/2007 10:24:25

6. From: Michael B
02/16/2007 14:10:45

5. From: Satyabrata Choudhury
02/15/2007 18:05:55

4. From: Kumar S
02/13/2007 01:13:52

3. From: Amer Neely
02/11/2007 10:01:58

2. From: Vibhu Bansal
02/10/2007 01:32:34

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

11. From: Steamboat09/29/2008 02:51:26

9. From: blogger tools04/17/2007 20:03:55

10. From: Lee (Admin)05/25/2007 11:33:34

8. From: Paul D03/06/2007 14:58:59

7. From: Phillip Juan McClore02/22/2007 10:24:25

6. From: Michael B02/16/2007 14:10:45

5. From: Satyabrata Choudhury02/15/2007 18:05:55

4. From: Kumar S02/13/2007 01:13:52

3. From: Amer Neely02/11/2007 10:01:58

2. From: Vibhu Bansal02/10/2007 01:32:34

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

11. From: Steamboat
09/29/2008 02:51:26

9. From: blogger tools
04/17/2007 20:03:55

10. From: Lee (Admin)
05/25/2007 11:33:34

8. From: Paul D
03/06/2007 14:58:59

7. From: Phillip Juan McClore
02/22/2007 10:24:25

6. From: Michael B
02/16/2007 14:10:45

5. From: Satyabrata Choudhury
02/15/2007 18:05:55

4. From: Kumar S
02/13/2007 01:13:52

3. From: Amer Neely
02/11/2007 10:01:58

2. From: Vibhu Bansal
02/10/2007 01:32:34