Dave Methvin wrote a plugin for jQuery to easily round corners. Then Mike Alsup improved on the plugin by adding more effects. Mike’s solution for adding a rounded border is great but he doesn’t give good copy and paste code. I had to dig through the source on the page to figure out some usage. He also misses (or I cannot find) an important piece – some of us want to specify the dimensions of our rounded box with rounded borders. Before using this code, you need to make sure you have downloaded jQuery and jquery.corner.js and obviously include them on your page.
Here is a simple explanation and example with code:
div.rounded_box{ background-color: #ccdaff; color: #333; padding: 10px; border:0; margin: 0; zoom:1; } /* border with rounded corners */ div.rounded_border { background: #6666ff; padding: 8px; }
That is the CSS for the rounded box and rounded border to go around the box. The only attributes you should need to change are anything color related and the padding (pretty obvious what they do but you can mess with the values after you get this example working).
Now you have 2 options for your HTML/Javascript set up (note that I have namespaced my jQuery functions to $j instead of $). The first option is probably a bit faster while the second option avoids an extra wrapper div in your code, allowing you to specify the width inline. Here is the first option:
<div style="width: your width here;">
<div id="my_rounded_box_id1" class="rounded_box">
<p>Content</p>
</div>
</div>
<div style="width: your width here;">
<div id="my_rounded_box_id2" class="rounded_box">
<p>Content</p>
</div>
</div>$j(function(){ $j('div.rounded_box').wrap('<div class="rounded_border"></div>'); //apply border $j('div.rounded_box').corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border });
Here is the second option:
<div id="my_rounded_box_id1" class="rounded_box" style="width: your width here;">
<p>Content</p>
</div>
<div id="my_rounded_box_id2" class="rounded_box" style="width: your width here;">
<p>Content</p>
</div>function roundDiv(id){ var tmp_width = $j('#'+id+'').css("width"); //get the width of target el $j('#'+id+'').css("width",""); //clear width value (or else corners screws up) $j('#'+id+'').wrap('<div class="rounded_border" style="width: ' +tmp_width+ ';"></div>'); //apply border $j('#'+id+'').corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border } $j(function(){ //round each box separately so that we can specify inline dimensions roundDiv('my_rounded_box_id1'); roundDiv('my_rounded_box_id2'); });
Enjoy!
UPDATE: After some more testing, the second option seems to be more cross browser compatible. I highly recommend using that option.
If you enjoyed this post, make sure you subscribe to my RSS feed!
25 Comments
Are you using this with Rails and it’s default Prototype based rjs?
I am using this in my Rails app, but you can use it anywhere. All you need is jQuery and jquery.corner.js (links are above). This does not use the Prototype library. Let me know how this works out for you. It is working out great for me so far.
Hi Toni,
Thanks for the update. I want to have a corner with 1px border along with a bit curved corners, so I did something like this:
$('#'+id+'').corner("round 20px").parent().css('padding', '1px').corner("round 20px"); //round box and border
The bottom corners are coming properly, but the top corners are not coming in a proper way (Showing the background color also).
Thanks,
Rocky
@Rocky Can you post your HTML/CSS of the div you are rounding?
Hi Tony,
Following is my CSS:
div.rounded_box{
background-color: White;
color: #333;
padding: 10px;
border:0;
margin: 0;
zoom:1;
}
/* border with rounded corners */
div.rounded_border { background: #CCCCCC; padding: 8px; }
#my_rounded_box_id1 p
{margin:0; padding:0;}
HTML:
Content
Thanks,
Rocky
Hi Tony,
I’m not able to add my HTML code. I included my html codes inside
but not working
I’m having a div with id=my_rounded_box_id1 class=rounded_box style=width: 400px; and a paragraph tag inside div having some content.
@Rocky No worries, just email it over. tonyamoyal:gmail:com
I’m having the same problem as rocky. Bottom corners work fine, but the top corners don’t. Was a solution found?
Thanks
Kev
Rocky never emailed me the code. Try to post your code here. You should be able to use the “code” tag or the “pre” tag with the “lang” attribute. If that doesn’t work, email it over and I’ll post a solution.
Probably better to just give you the link…
http://iamdesign.ukmicrosites.net/latest-work.php
Thanks for the help btw
I have a feeling it might be something to do with my css…
No problem, I obviously want the code I post here to work so you are also helping me. I’ll try to get to this today/tonight.
I appreciate the help a lot, thanks.
To be honest, its a mixture of yours and a theme i purchased so don’t feel obligated. The reason i’ve tried yours is because I was having problems with the theme. I have tampered with it so much i’m surprised its still working… But nothing has changed. Bottom works, top doesnt… Weird…
Thanks again.
I might suggest as a first step, create a test page with a minimal amount of code to make sure that works. Then as a second step, include the theme’s CSS file and make sure that still works. If that works well, you can keep adding stuff in until you see it break. Or at that point you can put up the original page and subtract stuff until it works.
Whether you work backwards or forwards is up to you, but I would definitely start by making sure the rounding works with the basic rounding code and the CSS files in your theme. This is exactly how I would debug it.
Also, you may already know to do this but I am mentioning it for the sake of being complete. If the code is being generated by a CMS or lots of server side code, just copy the code from the view->source and work off of that.
Let me know if you want me to take a look…but that is exactly what I will do.
Yeah, it makes sense to do that. I’m applying it to other div’s to test and its working fine.
I’m gonna do some debugging and see what happens.
Many thanks Tony, i’ll let you know the solution… IF I find the solution.
Thanks again
Kev
Just a quick note, if these are going to be a few static images, I highly recommend using roundpic. Obviously you don’t want to use this if you will need to round images dynamically (or lots of them).
I was same problem as Rocky. Bottom corner works fine, but top don’t. I solved this problem using “.corner(’10px’)” or “.corner(’15px’)” works too. When I was using 20px, didn’t work.
Hello
it’s working fine in mozila as well as in ie. but it creates problem in ie when background of the page is image. corner will be display as white color….
any solution for this
it’s urgent help me…
@Frederico – Yea the solution is a bit hackish and can screw up occasionally. It’s not too difficult to mess with it and get it to work though. Glad you figured it out.
@kamini – That may be a limitation. Email me your code and background image and I’ll mess around with it for a few minutes.
I was trying to create the rounded corners from your code on the page but can’t seem to produce it on a test page? I’ve got a page here: http://robquigley.me/rounded-corner/index.html and I’m not sure what I’m doing wrong. Can you help?
@Rob, doesn’t look like you are namespacing jQuery to use $j. If that is the case, then I think you should just use ‘$’ in place of ‘$j’. Make sense?
@ Kamini, did you have a fix for your problem? I am having the same issue. I would really appreciate if you share. Thank you in advanace.
“… when background of the page is image. corner will be display as white color.”
Rob Q, dude, you have it all wrong. You have JS links as CSS links, you crazy dog!
Look at your code, there first .js files are linked inside a CSS declaration, which will never work because you are loading your javascripts as CSS.
Then there is the issue Tony mentioned. You have “$j” everywhere. Just make sure to remove the “j” from that and you will be fine.