/    Sign up×
Community /Pin to ProfileBookmark

Rounded Corners

Copy linkTweet thisAlerts:
Jun 29.2007

Hi all
My Greetings for the day
I have an issue wondering if any of u may help me to get rounded corners for
the frames and buttons used in the page.
Actually I have a page which displays sevelral frames like 2,3,6,8 frames together in a rgular shape dynamically I want all the frame corners to have rounded edge/corners.

Similarly I want buttons also to have a rounded corner..I was actually lloking for sth so that I can do it without using rounded images at the corners.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsJun 29.2007 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--
.tst {
background-Color:#FFFFCC;border:solid green 6px;color:#CCFFFF;
}

-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
// Rounded (07-February-2007)
// 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

// The script allows rounder corners corners to be applied to a DIV elements.
// The corners and associated edges are added to the initial DIV dimensions.
//
// There may be as many applications on a page as required.
//

// ***** Application Notes


// ***** The HTML Code
//
// The requirement for the rounded corners if 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
// example
// <div id="tst2" class="tst zxc,Rad20,Border2#FFCC66,TLTR,Opacity50" style="width:200px;heig....
// where 'zxc' to allow the script to recognise that rounded corners are to be applied
// the balance defines the corner features, each feature separated by a commer
// 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.
//

// ***** Initialisation
//
// The script may be initialised from a BODY or window onload event call
// to function 'zxcCorners()'
// e.g.
// <body bgcolor="#FFFFff" onload="zxcCorners();" >
//

// **** General
//
// The functional code(about 7K) is best as external JavaScripts
//
// 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.
//
// Tested with IE6 and Mozilla FireFox
//


// ***** Functional Code - NO NEED to Change.


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=[zxcrary[0]-zxcopts[1],zxcopts[0]*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])+')'; }
zxcrary[1]=(zxcrary[1]>zxcrary[0])?zxcrary[1]:null;
}
zxcrary[0]+=(zxcrary[0]%2==0||!zxcrary[1])?0:1;
var zxcw=parseInt(zxcstyle[1]);
var zxch=parseInt(zxcstyle[2])||zxcobj.offsetHeight;
if (!zxcw){ return; }
zxcES(zxcobj,{position:(zxcstyle[0]=='static'||!zxcstyle[0])?'relative':zxcstyle[0],border:'0px'});
var zxcbwh=zxcrary[0]+(zxcrary[1])?zxcrary[1]:0;
if (zxcopts[4]){
var zxcp=zxcES('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);
zxcES(zxcobj,{left:zxcbwh+'px',top:zxcbwh+'px'});
}
var zxcmary=['BR','BL','TL','TR'];
var zxccary=[];
for (var zxc0=0;zxc0<zxcrary.length;zxc0++){
zxccary[zxc0]=[];
zxccary[zxc0][0]=zxcES('DIV',{position:'absolute',zIndex:1-zxc0+'',width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px',left:(zxcw-(zxcrary[1]||zxcrary[0])/2)+'px',top:(zxch-(zxcrary[1]||zxcrary[0])/2)+'px',border:'solid black 0px'},zxcobj);
var zxcclone=zxcES(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);
zxcclone.removeAttribute('id');
var zxcinner=(zxc0<1)?zxcrary[0]/2:zxcrary[0];
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);
var zxcin=((zxc1<zxcinner)?Math.floor(Math.sqrt(Math.pow(zxcinner,2)-Math.pow((zxc1+1),2))-1):0);
zxcES(zxcclone.cloneNode(false),{left:zxc1+'px',top:(zxcin)+'px',width:'1px',height:Math.max(zxcht+1-zxcin,0)+'px'},zxccary[zxc0][0]);
for(var zxc1a=(zxcht+1);zxc1a<Math.ceil(Math.sqrt(Math.pow(zxcrary[zxc0],2)-Math.pow(zxc1,2)));zxc1a++){
zxcES(zxcclone.cloneNode(false),{left:zxc1+'px',top:zxc1a+'px',width:'1px',height:'1px'},zxccary[zxc0][0]);
}
}
for (var zxc2=1;zxc2<4;zxc2++){
zxccary[zxc0][zxc2]=zxcES(zxccary[zxc0][0].cloneNode(true),{left:((zxc2<3)?-zxcrary[zxc0]/2:zxcw-zxcrary[zxc0]/2)+'px',top:((zxc2<2)?zxch-zxcrary[zxc0]/2:-zxcrary[zxc0]+zxcrary[zxc0]/2)+'px'},zxcobj);
var zxcclds=zxccary[zxc0][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);
zxcES(zxcclds[zxc2a],{left:((zxc2<3)?(zxcrary[zxc0]-zxclft-1):(zxclft))+'px',top:((zxc2<2)?zxctop:(zxcrary[zxc0]-zxchte-zxctop))+'px'});
}
}
else { zxcES(zxcclds[0],{width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px'}); }
}
if (!zxcopts[3].match('BR')){ zxcES(zxccary[zxc0][0].firstChild,{width:zxcrary[zxc0]+'px',height:zxcrary[zxc0]+'px'}); }
var zxcwh=(!zxcrary[1])?0:Math.ceil(zxcrary[1]-zxcrary[0]);
var zxcie=(document.all)?0:1;
for (var zxc3=0;zxc3<4;zxc3++){
if (zxc0>0){ zxcES(zxccary[0][zxc3],{zIndex:'2',left:((zxc3<1||zxc3>2)?0:zxcwh)+'px',top:((zxc3<2)?0:zxcwh)+'px'},zxccary[1][zxc3]); } // 1
zxcES(zxcclone.cloneNode(false),{left:((zxc3>0&&zxc3<3)?(zxcrary[1]||zxcrary[0])/2-zxcie:(zxc3<1)?-zxcrary[zxc0]/2+((zxc0<1)?zxcwh/2:0):(zxc0<1)?zxcw:zxcw+zxcrary[0]/2-zxcwh/2)+'px',top:((zxc3==1)?(zxc0<1)?zxch:zxch+zxcrary[0]/2-zxcwh/2:(zxc3==2)?-zxcrary[zxc0]/2+((zxc0<1)?zxcwh/2:0):(zxcrary[1]||zxcrary[0])/2-zxcie)+'px',width:((zxc3>0&&zxc3<3)?zxcw-(zxcrary[1]||zxcrary[0])+zxcie:(zxc0<1)?zxcrary[zxc0]/2-((zxc0<1)?zxcwh/2:0):zxcwh)+'px',height:((zxc3>0&&zxc3<3)?(zxc0<1)?(zxcrary[zxc0]/2-((zxc0<1)?zxcwh/2:0)):zxcwh:zxch-(zxcrary[1]||zxcrary[0])+zxcie)+'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 zxcES(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 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; }
}

//-->
</script>

</head>

<body bgcolor="#FFFFff" onload="zxcCorners();" >

<div id="tst1" class="tst zxc,Rad50,Op50" id="Tst" style="position:relative;width:200px;height:152px;left:300px;top:100px;background-Color:#FFCC66;border:solid #ff0000 5px;" ></div>

<div id="tst2" class="tst zx1c,Rad20,Border1#FFCC66,TLTR,Opacity50" style="width:200px;height:100px;left:600px;top:100px;" ></div>

</body>

</html>

[/CODE]
Copy linkTweet thisAlerts:
@vwphillipsJun 29.2007 — from PM

Thanx for ur response...

this code is working very fine and would have been of more use for me if i had to do for 'div' element actually.

but I want rounded corners for 'td','iframes' and button elements...tried playing with the code for that...but failed...pls tell if sth is specific to my requirement..thnx alot for replyiing...

Only way I can think of doing this is to overlay the rounded border on an unbordered element.

I may get round to looking at this in the future, will let you know if I do.
Copy linkTweet thisAlerts:
@dicicco2Jun 30.2007 — why not just use rounded corners in css? why use a 200 line script? i dont see the need.. maybe im missing something..
×

Success!

Help @kjeet spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...