Rounded corners
Our rounded corners implementation is based on three different works:
- Nifty Corners at http://pro.html.it/esempio/nifty/
- http://www.acko.net/anti-aliased-nifty-corners
- http://seky.nahory.net/2005/04/rounded-corners/
We took these, combined them, stripped some functionality (kept antialiasing) and simplified the API. There is one restriction: only DIVs can be rounded with this implementation, which suited us fine, and made the code a bit shorter.
Usage
You have to attach a class "rounded" to the divs you want round.
Here's the Javascript that you have to add to the end of your html page
<script type="text/javascript">
Rounded('rounded', 6, 6);
</script>
The first parameter, "rounded" stands for the classname which is used to mark the divs that we want to make round. The other two parameters are the radius of the corners, the bigger the number, the rounder you will get.
License
Free for personal and commercial use (open/closed source) but please give credit, if possible.
Updates
Update: Added two optional parameters. Now the usage is:
Rounded(class, sizex, sizey [, sizex_bottom, sizey_bottom]);
sizex_bottom and sizey_bottom being optional, as denoted by the square brackets.
If sizex_bottom and sizey_bottom are missing, all 4 corners are rounded. If they are present, sizex and sizey are used for top row and the sizex_bottom and sizey_bottom are used for bottom row.
Examples
-
Rounded('rounded', 10, 10);
All 4 corners -
Rounded('rounded', 5, 5, 20, 20)
Bottom row is rounder than the top -
Rounded('rounded', 0, 0, 20, 20);
Round only the bottom row
-
Rounded('rounded', 10, 10, 0, 0);
Round only the top row
Download
Download rounded.js 6KB, roundedtest.html 1KB
References
Smiley Cat Weblog: CSS Rounded Corners 'Roundup'
ASP.NET AJAX Forum Posts: Cannot use <script src="filename.js" />
看这些好玩的事儿: 无图片无javascript脚本的纯CSS圆角实现
As of today, there's a pixy in your Blend() and rgb2hex() functions. They can not handle components below 16. FYI whenever you juggle with hex color codes and want to return a #RrGgBb like value, you MUST make sure to return 2 characters per component.
To do so, you can simply do this:
hex = ('0'+dec.toString(16)).substr(-2);Hope that helps,
I would'nt use the
<script type="text/javascript">Rounded('rounded', 6, 6);</script>
part, instead I would add into the .js file something like:
-------------------------------
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(rounded);
----------------------
and change the rounded function with:
function rounded() {var bk;
if (!NiftyCheck()) return;
var v = getElements("rounded");
var l = v.length;
for (var i = 0; i < l; i++) {
size = v[i].getAttribute("rel");
sizex = size.substr(0,size.indexOf(","));
sizey = size.substr(size.indexOf(",")+1,size.length);
color = get_current_style(v[i],"background-color","transparent");
bk = get_current_style(v[i].parentNode,"background-color","transparent");
AddTop(v[i], bk, color, sizex, sizey);
AddBottom(v[i], bk, color, sizex, sizey);
}
}
then you can use it in the HTML :
<div rel="6,6" class="rounded">Rounded<div>I think it is mutch more elegant that way :)
it is not working with ie with these colors for example:
<code
<body style="background-color:#001600">
<div style="background-color: #eeeeee; color: #000000; ...
why is that? ( I tried with Mathieu 'p01' HENRI mod, but still error in ie...)
guest: Don't worry it's just a spec violation of JavaScript 1.2 [1], [2] in IE. It will work if you use :
hex = ('0'+dec.toString(16)).slice(-2);Sorry for not even bothering to test in IE. *sigh*
[1] http://docs.sun.com/source/816-6408-10/string.htm
[2] http://docs.sun.com/source/816-6408-10/string.htm#1194618
Thanks Mathieu 'p01' HENRI!
That was a good tip, and it did help. I updated the script.
I thought I would drop by and explain why you're getting the sudden influx in visitors Ilkka. I mentioned your site on spiffycorners.com as the best .js solution ;)
Good work by the way.
I noticed Spiffy corners and it's a good approach, imho. I thought I will start using it myself and recommending it as an alternative solution. Here, 7kb is still a lot of Javascript, although it's not that much when gzipped.
Of course the purists may notice that the html code gets some extra markup (b tags), but Spiffy's quite practical anyway. I will be waiting for the possibility to define the radius :).
Thanks for noticing. Until the CSS3 kicks in, and browsers start antialising the border-radius, we'll be using these I think.
still not working in ie with the fix :(
(try with the above mentioned colors)
Hmm, it works for me, with those colors. You sure the cache didn't get in your way? Try refreshing the rounded.js or empty your browser cache? The new .js, while it doesn't have a version number, should have a new list of contributors, so you can check if the version is correct...
After looking at about 5 different no-images approaches to rounded corners, I like yours the best. How easy would it be to implement selective rounding (eg. top corners only)?
I would have to agree with Gabriel. It would be very usefull to be able to govern which of the 4 corners is rounded.
OK, I added two optional parameters. I didn't want to get too involved, it's possible to apply the parameters to top and bottom row, or all 4 corners now.
Magically, the script reduced 2kb in size at the same time, so it was worth it :) I'm not so sure if those two parameters are that useful but they don't hurt they being optional.
That was quick! I was commenting out the AddBottom call, but this is nicer. Thanks!
is there any support for redrawing the corners? eg if the background color of the div changed?
thanks in advance :)
Damn you! :-)
Try this http://www.editsite.net/blog/rounded2.js
After the background color has changed, call Rounded('rounded'); ... with one argument, the classname only.
If it doesn't work, complain here...
Hi!
Nice an easy solution to this problem!
But, could it be possible to add Safari support? Black background in the corners is shown with it. Thanks.
Franco
PD: if no Safari available to test it is possible to view how Safari renders a site with http://www.snugtech.com/safaritest/
Should be now? BTW, this safaritest, especially the VNC service, was a great tip. Thanks.
Thanks for the quick solution!
Note - I tried adding 5px padding to the div that is rounded, and ended up with a 5px border around the rounded box :-p i had to add another div inside the rounded box and pad that. Trying to avoid div-itis . . . can you think of any other way to avoid it?
Yes padding doesn't work too well with this ... maybe there's a solution (will see when I get to it) but that work-around works which you described.
I'll see if removing the div restriction will cause the code growing too much... it's there just to keep the code a bit shorter.
this stuff is really good... i am just testing it out thoroughly before i can use it on one my sites... but any luck on the padding issue...?
What i find ironic is that you dont realy use rounded corners in your own website. All cquare edges, so y shoud I?
S2
I use it on the home page (the ahoy box).
The plans are images because I wanted a little gradient and drop shadows.
I have to agree with Adam. Having to double wrap containers in order to use padding is annoying and not very elegant, but it seems to be the only solution. At least for now.
I Ilkka I've sended to you by email some changes to support specifying which corner is rounded as someone mentioned above. I needed that feature myself so I did those changes.
It does not work if the div contained in a table in IE....
any workaround?
Sorry for not working on this for a while, I've been busy. I will do something to this at some point unless someone is faster than me...
Is there any way of doing borders with specified width with this? Or if not can anyone recommend a way of doing it.
Cheers,
Ciaron.
re Teddy's problem: you probably need to modify AddRounded:
var d = document.createElement("div");d.style.backgroundColor = bk;
d.style.height = sizey+'px'; // add this line
var lastarc = 0;
I also added a color map to my implementation so you can have a div with e.g. 'background-color:white'; this is needed because IE doesn't automatically map the color over to an RGB value.
ive tested it under safari 2.x, firefox, and IE6
Ciaron: You could do a 1 pixel border with these changes (diffing from http://www.editsite.net/blog/rounded2.js: at the beginning of the line, the - means old and + means new, and neither means unchanged):
bk = get_current_style(v[i].parentNode,"background-color","transparent");+ border_color = get_current_style(v[i],"border-color","transparent") || color; // default to v[i]'s bg color
if (typeof(sizex) == 'undefined')
RecolorRounded(v[i], bk, color);
else
{
- AddRounded(v[i], bk, color, sizex, sizey, true);
- AddRounded(v[i], bk, color, sizex_b, sizey_b, false);
+ AddRounded(v[i], bk, color, border_color, sizex, sizey, true);
+ AddRounded(v[i], bk, color, border_color, sizex_b, sizey_b, false);
}
- function AddRounded(el, bk, color, sizex, sizey, top) {
+ function AddRounded(el, bk, color, border_color, sizex, sizey, top) {
- x.style.backgroundColor = Blend(bk, color, coverage);
+ x.style.backgroundColor = Blend(bk, border_color, coverage);
This seems to work well when i tested with dummy values for border_color ('#000000').
Some changes I haven't put here are altering your target DIV's borders: you may need to add a 1px-wide DIV to either side of the target DIV to fake the border attribute, and color the top-most and bottom-most DIVs the border color to simulate border-top and border-bottom colors.
I found a little BUG in your script.
When I have BODY tag and there are DIVs with content everythings works, but when I add background-image CSS style to BODY corners in DIVs have white (not transparent) background.
I really need it - Can you fix it? I've tried but I can't :-(
Big thx :-)
Have a nice day
ps. sorry for my english :-S
I think that is a limitation that cannot be solved but I try to take a look at some point. I am not very hopeful about this though, I remember this was an inherent limitation of that script...
I have a strange problem - the corners sort of fall apart in IE6. I'm not entirely sure why... It seems to happen with all of the rounded corner scripts, and yes, javascript is on.
http://ocean.city.k12.nj.us/test/site/new.php is the particular page.
You mentioned a hex fix of some sort, but I have _no_ idea where to use that either way. I figured to replace the hex var in the rgb2hex function but that just breaks everything...
Sorry, the link is www.ocean.city.k12.nj.us/test/site/new.php
Nscott, I think you just need to reduce your html file to the simplest possible case and see when it gets fixed. Or start with the roundedtest (above), expand that and see when it breaks.
Ilkka
Do you have some support for background-images ? so I can select corners on a background image not just color. ?
Djj,
I'm afraid not, but there are many scripts out there that use images to create the rounded corners - although the images have to be round to start with.
It may be possible to modify this script to do what you asked, but as always, we will have to see if someone actually does it :-)
Ilkka
Hi all,
I have also been trying to add some padding to these rounded divs. I originally just added another div section within the rounded div tag, but that is tedious is for multiple rounded divs.
So within the rounded() function, I added the line:
bk = get_current_style( v[i].parentNode,"background-color", "transparent");v[i].innerHTML = "<div style='padding:5'>" + v[i].innerHTML + "</div>";
AddRounded(v[i], bk, color, sizex, sizey, true);
AddRounded(v[i], bk, color, sizex, sizey, false);
This gets the job done with minimal hassle, IMO, by letting the jscript function handle the embedded padded-div. I am by no means a javascript expert (I code in C myself)... But this might be helpful for anyone looking for a simple fix.
- Meng
Hi
Can you wrap multiple divs into forming a single table-like structure which you outline with rounded corners or does it only work for a single div?
Regards
Andrew
Hi,
I just download the .js and tried the example page... perfect!
But I added a second box under the one in the example and the rounded corners in the first box screwed up :( however, in the second box everything looks pretty good... maybe I need to dig in the .js code
The problem is when you have 2 boxes or more with the same class name, which i think, it's normal to have, for example when you want add quotes to your webpage and give them the same format.
take this code and test it, please. You will see what I mean and what happen with the borders. :(
I tried in IE6 and FF2. The same ugly results.
this goes in the head section:
<style>.roundedbox{
margin: 0pt auto;
width: 200px;
height: 100px;
background-color: rgb(153, 170, 187);
font-family: Verdana;
font-weight: bold;
font-size: 10px;
font-size-adjust: none;
color: rgb(255, 255, 255);
text-align: center"
}
</style>
and in the body you could have something like
<div class="roundedbox">Quote 1</div><script type="text/javascript">Rounded('roundedbox',6,6);</script>
<div class="roundedbox">Quote 2</div>
<script type="text/javascript">Rounded('roundedbox',6,6);</script>
<div class="roundedbox">Quote 3</div>
<script type="text/javascript">Rounded('roundedbox',6,6);</script>
if someone found the solution please I would be glad to know it :)
Thanks,
Dummy Tux
Hello!
I created a site with several draggable DIVs. In FF2 everything works fine with the rounded corners.
In IE6 when the side is loaded everything looks good. but after dragging a div all the nice rounded corners are filled with horizontal lines in the background-color.
I tried to call the rounded - method again after dragging, but it doesn't work!
any idea how to fix or avoid this problem?
Or is this not possible with the script?
If you like to take a look:
http://conny.burko.de/portal/index.html
Last but not least: I love your script so far...
Thanks,
Conny
hi,
I tested the script with css and faced some issues
1. if there is a property of background color inside the class of the div , the script works fine. if the property of the background is an image seems doesn't work
2. It works fine with firefox 1.5.x & 2.0, IE6, maxthon,seamonkey, but the design is totally screwd up when using opera. I saw that there is a browser sniffing test in the beggining of the script that checks the browser user agent and if it is IE5 or opera it returns false. SInce I m not quite familiar with javascript, I m wandering if there is a quick hack to make it work with opera.
thanks ,
snek
I just uploaded roundedtest.html and rounded.js and I ran the rounded test and it failed...
The version thats uploaded, doesnt work :s
Does anyone have a copy of the .js file that is working with IE7? I just downloaded the file from here and it is not working.
Any help with this would be great.
Thanks!
There was some garbage in the start of the javascript file which made the whole file non-working. It should be ok now.
Hi Ilkka,
I like the script a lot better than the other ones. It's easy to use.
I'm having problems with the rounded corners displaying when it is generated by an ASP page. When you view the source, the JavaScript at the bottom of the div is there. Any ideas why it would be doing this.
It is fine if you test it separately, but not within an asp code.
It is a pity that the script does not work when the DIV's are placed inside a TABLE.
So the script can not be used inside JOOMLA with it's many tables.
Is there a solution available?
Dummy Tux - i know 'm a bit late and you likely figured it out and don't need my help...
but...
I wanted to make a top banner with the top corners rounded and not the bottom, and a footer div with the bottom corners rounded but not the top. It turns out all i had to do was this:
<script type="text/javascript">Rounded('rounded', 10, 10, 0, 0);
Rounded('rounded2', 0, 0, 10, 10);
</script>
then just add the specific class to the div you want it applied to. worked great for me.
having said that - does this not work in Safari?
Hellooht - this is just a testing, don't worry about it
Doesnt work on IE
shouldn't be using ie anyways, use firefox!
I have toyed around with a bunch of these rounded corner techniques, and this one is VERY close to being the easiest (and best). I am just having a little problem and i bet its caused by something i have unintentionally done.
...(i am coding for ie7 because the most people use it)...
In ie7 it seems like the corners spread apart. If i minimize then re-open the IE window. Here is an image of what it does:
http://www.kingsolve.com/prob.bmp
I would really like to use this type of corner in my site's next build, if i could just fix this one issue. Anyone have any idea how to correct this?
<a href=" https://www.cslu.ogi.edu/forum/files/xenical_807.txt "> xenical </a> xenical <a href=" https://www.cslu.ogi.edu/forum/files/zithromax_349.txt "> zithromax </a> zithromax <a href=" https://www.cslu.ogi.edu/forum/files/viagra_176.txt "> viagra </a> viagra <a href=" https://www.cslu.ogi.edu/forum/files/ultram_171.txt "> ultram </a> ultram <a href=" https://www.cslu.ogi.edu/forum/files/soma_903.txt "> soma </a> soma
Hellofsf - this is just a testing, don't worry about it
<a href=" https://bugzilla.samba.org/attachment.cgi?id=2419 "> buy viagra </a> buy viagra <a href=" https://bugzilla.samba.org/attachment.cgi?id=2420 "> cheap viagra </a> cheap viagra <a href=" https://bugzilla.samba.org/attachment.cgi?id=2421 "> generic viagra </a> generic viagra <a href=" https://bugzilla.samba.org/attachment.cgi?id=2422 "> levitra </a> levitra <a href=" https://bugzilla.samba.org/attachment.cgi?id=2423 "> order viagra </a> order viagra <a href=" https://bugzilla.samba.org/attachment.cgi?id=2424 "> propecia </a> propecia <a href=" https://bugzilla.samba.org/attachment.cgi?id=2425 "> soma </a> soma <a href=" https://bugzilla.samba.org/attachment.cgi?id=2426 "> ultram </a> ultram
<a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=195 "> alltel ringtones </a> alltel ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=196 "> audiovox ringtones </a> audiovox ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=197 "> cell ringtones </a> cell ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=198 "> cingular ringtones </a> cingular ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=199 "> cingular ring tones </a> cingular ring tones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=200 "> download free ringtone </a> download free ringtone <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=201 "> download ringtones </a> download ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=202 "> free alltel ringtones </a> free alltel ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=203 "> free motorola ringtones </a> free motorola ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=204 "> free mp3 ringtones </a> free mp3 ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=205 "> free ringtone </a> free ringtone <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=206 "> free ring tones </a> free ring tones
<a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=207 "> free verizon ringtones </a> free verizon ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=208 "> mobile ringtones </a> mobile ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=209 "> mp3 ringtones </a> mp3 ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=210 "> nextel ringtones </a> nextel ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=211 "> ringtones for free </a> ringtones for free <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=212 "> samsung ringtones </a> samsung ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=213 "> sanyo ringtones </a> sanyo ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=214 "> siemens ringtones </a> siemens ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=215 "> sony ericsson ringtones </a> sony ericsson ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=216 "> t mobile ring tones </a> t mobile ring tones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=217 "> tracfone ringtones </a> tracfone ringtones <a href=" https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=218 "> verizon ringtones </a> verizon ringtones
Hellohuv - this is just a testing, don't worry about it
Hi,
i hope that someone will read this:
I got the round box, but i want to have an extra border around it. How to do this?
Because if i write:
border-left: 1px solid #000; [...]
then the border isn't rounded.
Can anyone help me?
Thank you in advance.
Looks like there are duplicate return statements in the Blend function:
return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)
+ ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)
+ ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);
return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)
+ ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)
+ ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);
Shouldn't hurt anything, as the second one will never get executed, but it should probably be cleaned up.
Hello,
Has anyone tried this with IE7 and floated divs?
Cheers
Helge
Awesome, thanks for the work on this, it makes my stuff look all "Internet 2"'ish
Hi there,
Have been testing this successfully on IE7 and Firefox2. Have been customizing for some cool side menu ideas, however I have been using inner embedded rounders and messing with margins to "fake" a border. Is there any other way to get a clean 1 px border that surrounds the rounded div?
Again, looking for a clean way to implement a border around the rounded div. Don't want to have to convert to a completely different script (like nifty) as this one is lightweight, and cross-browser friendly.
Any help would be appreciated. Thanks.
Dan
Ilkka,
Nice work.
For a full feature rich java-based solution, check out Stephan Ruzee's approach - the best I've seen:
http://www.ruzee.com/blog/shadedborder
Features:
JavaScript-only Photoshop(tm)-like rendering without external images
Round corners
Drop shadows
Glow effects
Gradient backgrounds
Graceful degradation - will look ok if JavaScript is turned off
Borders with different widths
Full support for liquid designs
Anti-Aliasing
On-hover support (except for IE 6.0)
Disable some of the corners, e.g. bottom-left
Change borders on-the-fly
Real transparency - looks perfect on any background
Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
Non-obstrusive
Leight-weight (8.4KB uncompressed)
Fast (0.4s for the example on a 2.2GHz machine)
No JavaScript library dependencies
Bless you for putting this together.
Doesn't work
Okay it does work, but it hasnt been updated in a while.
Anybody got an upto date version which adds rel="6,6,6,6" support, cleaned up returns and an option for padding?
That would own.
If you need to pad, just nest another div tag:
<div id="rounded">
<div style="padding: 10px">
text
</div>
</div>
doesn't work with opacity: corners are rounded off, but instead of nothing, there's a faint semitransparent bit underneath
it's not work/support in IE 7.
So it's not possible to round for example just the lower-left corner?
Is there a way to make a empty rounded rectangle? I mean, the borders are in color but its filled with just white.