The Smallest Rounded Corners Script in Existence
As usual I did a lot of googleing and research looking for a prefered method to round my corners. What I found was this awesome little script by Editsite. All I did was compress it down to 3k and make it painfully easy to understand how to impliment into your own project.
Step 1) Create a file named rounded.js and copy/paste the script directly below into it.
/* Contributors: Ilkka Huotari at http://www.editsite.net Mathieu 'p01' HENRI at http://www.p01.org http://seky.nahory.net/2005/04/rounded-corners Steven Wittens at http://www.acko.net/anti-aliased-nifty-corners Original Nifty Corners by Alessandro Fulciniti at http://pro.html.it/esempio/nifty */
function NiftyCheck(){if(!document.getElementById||!document.createElement){return false}var A=navigator.userAgent.toLowerCase();if(A.indexOf("msie 5")>0&&A.indexOf("opera")==-1){return false}return true}function Rounded(F,H,G,B,E){var A;if(!NiftyCheck()){return }if(typeof (B)=="undefined"){B=H}if(typeof (E)=="undefined"){E=G}var I=getElements(F);var C=I.length;for(var D=0;D<C;D++){color=get_current_style(I[D],"background-color","transparent");A=get_current_style(I[D].parentNode,"background-color","transparent");AddRounded(I[D],A,color,H,G,true);AddRounded(I[D],A,color,B,E,false)}}Math.sqr=function(A){return A*A};function Blend(D,B,E){var C=Array(parseInt("0x"+D.substring(1,3)),parseInt("0x"+D.substring(3,5)),parseInt("0x"+D.substring(5,7)));var A=Array(parseInt("0x"+B.substring(1,3)),parseInt("0x"+B.substring(3,5)),parseInt("0x"+B.substring(5,7)));return"#"+("0"+Math.round(C[0]+(A[0]-C[0])*E).toString(16)).slice(-2).toString(16)+("0"+Math.round(C[1]+(A[1]-C[1])*E).toString(16)).slice(-2).toString(16)+("0"+Math.round(C[2]+(A[2]-C[2])*E).toString(16)).slice(-2).toString(16);return"#"+("0"+Math.round(C[0]+(A[0]-C[0])*E).toString(16)).slice(-2).toString(16)+("0"+Math.round(C[1]+(A[1]-C[1])*E).toString(16)).slice(-2).toString(16)+("0"+Math.round(C[2]+(A[2]-C[2])*E).toString(16)).slice(-2).toString(16)}function AddRounded(B,A,L,R,Q,K){if(!R&&!Q){return }var N,M;var O=document.createElement("div");O.style.backgroundColor=A;var J=0;for(N=1;N<=Q;N++){var F,E,D;arc=Math.sqrt(1-Math.sqr(1-N/Q))*R;var C=R-Math.ceil(arc);var I=Math.floor(J);var P=R-C-I;var H=document.createElement("div");var G=O;H.style.margin="0px "+C+"px";H.style.height="1px";H.style.overflow="hidden";for(M=1;M<=P;M++){if(M==1){if(M==P){F=((arc+J)*0.5)-I}else{E=Math.sqrt(1-Math.sqr((R-C-M+1)/R))*Q;F=(E-(Q-N))*(arc-I-P+1)*0.5;F=0}}else{if(M==P){E=Math.sqrt(1-Math.sqr((R-C-M+1)/R))*Q;F=1-(1-(E-(Q-N)))*(1-(J-I))*0.5}else{D=Math.sqrt(1-Math.sqr((R-C-M)/R))*Q;E=Math.sqrt(1-Math.sqr((R-C-M+1)/R))*Q;F=((E+D)*0.5)-(Q-N)}}H.style.backgroundColor=Blend(A,L,F);if(K){G.appendChild(H)}else{G.insertBefore(H,G.firstChild)}G=H;var H=document.createElement("div");H.style.height="1px";H.style.overflow="hidden";H.style.margin="0px 1px"}H.style.backgroundColor=L;if(K){G.appendChild(H)}else{G.insertBefore(H,G.firstChild)}J=arc}if(K){B.insertBefore(O,B.firstChild)}else{B.appendChild(O)}}function getElements(C){var E=[];var B=document.getElementsByTagName("DIV");var D=new RegExp("\\b"+C+"\\b");for(var A=0;A<B.length;A++){if(D.test(B[A].className)){E.push(B[A])}}return E}function get_current_style(D,G,C){var A,B,H,F;try{var E=document.defaultView.getComputedStyle(D,"");H=E.getPropertyValue(G)}catch(A){if(D.currentStyle){F=G.split("-");for(B=1;B<F.length;B++){F[B]=F[B].toUpperCase()}F=F.join("");H=D.currentStyle.getAttribute(F)}}if((H.indexOf("rgba")>-1||H==C)&&D.parentNode){if(D.parentNode!=document){H=get_current_style(D.parentNode,G,C)}else{H="#FFFFFF"}}if(H.indexOf("rgb")>-1&&H.indexOf("rgba")==-1){H=rgb2hex(H)}if(H.length==4){H="#"+H.substring(1,1)+H.substring(1,1)+H.substring(2,1)+H.substring(2,1)+H.substring(3,1)+H.substring(3,1)}return H}function rgb2hex(E){var A=255;var C="";var B;var D=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;var F=D.exec(E);for(B=1;B<4;B++){C+=("0"+parseInt(F[B]).toString(16)).slice(-2)}return"#"+C};
Step 2) Now link to the script by placing this within the <head> of your page like so.
<script type="text/javascript" src="rounded.js"></script>
Step 3) Place this snippet on any page that want rounded corners, and just above the end </body> tag. The bigger the number, the more rounded the corner.
<script type="text/javascript">
Rounded('rounded', 15, 15);
</script>
Step 4) Give each div that you want to be rounded the class of rounded like so. Thats it, easy - peasy!
<div class="rounded"></div>
Limitations: This script will only round divs. Also, and this one took me awhile, you can only give the rounded divs a width - not a height. You can only increase their height with padding or line-height on the inner elements.
