Comments

Hi i want to know how to create a rounded rectangle in css please give some guidens.

regards,
krishna

I just want to say thank you. This script is very universal. I am able to use this on everything, but my banner (because its not a background image and I'm not able to make it do what i want as a background. With the banner I can just use transparency though, so no big deal.

Thanks!

Is there a way to have two or more sets of differenct corners on one html page? I have the basic (manual code) working fine but I have one div that will use corners that is much bigger than the rest.

Thanks.

For those having trouble with the new version of curvycorners in IE8 - all colour declarations must be made in hex. If you use the colour name (e.g. yellow) you will get black elemnets top and bottom.

Code:

<style>
.myBox{
filter:alpha(opacity=40);
width:300px;
margin-left:auto;
margin-right:auto;
}
.myBoxContent{
position:relative;
margin:10px;
background:#fff;
color:#000;
}
</style>
<script type="text/JavaScript">

addEvent(window, 'load', initCorners);

function initCorners() {
var settings = {
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true
}
curvyCorners(settings, ".myBox");
}

</script>
<div class="myBox">
<div claa="myBoxContent"> The Alpha Test !</div>
</div>

When the Div "Mybox" set the "alpha" in css, it will cover "Myboxcontent" for IE .

Awaiting for help.


Thank You!

I am trying to use this code in wordpress. But it does not works. Please help to do this.

I cant get this to work in Opera and IE. Im doing it the new CSS way so it works in firefox, safari and chrome as its just using the native way to round corners. Im not sure which file to include from when i download it as there are many in the download and its not clear from the instruction page which file to include in your web document.

Basically im including this file:

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

and then in CSS i've done:

#container, #container #main-content { -moz-border-radius: 20px; -webkit-border-radius: 20px; }

So from what im led to believe that should also work in IE and Opera? But its not so a little help would be appreciated, thanks :)

Also is there any initialisation im supposed to do somewhere?

From the examples i see you're just including 1 file using the new CSS way yet it works on opera and IE but doesnt for me :/

Did you know that Opera 10.5 pre-alpha supports rounded corners?? Script should be updated ASAP. It doesn't work properly in Opera 10.5 pre-alpha at all. Even the demos. How is that possible?? You should simply use feature detection instead browser detection...

error 557 "Unexpected call to method or property access"

might be caused if you set the border radius rule on an img element

RESUME
At. Post. Kodamendhi Date – 18/12/1989
Tahsil Mouda D... Nagpur
(Maharashtra)
NAME - GIRISH DILIP LIMJE

FA. NAME - DILIP LIMJE

DA. OF. BIRTH - 04/12/1989

CATEGARY - - OPEN

RELIGION - HINDU

NATIONALITY - INDIAN

MARIYAL ST. - UNMARRIED

LANG. KNOW - ENGLISH, HINDI,MARATHI

MOBILE NO. - +919021679418

PHONE NO. -+9107115684911

EDU. QULIFI. -
1. 10th Diploma
2. 12th Diploma
3. IT i ZEN PROGRAM (Software)(72%)
Ms Office 2000, HTML, Ms Access 2000, Visule Basic,
4. Certificate in typing with (30)wpm speed(83%)
5. B.C.A . I YEAR APPEAR

Experience:- I am working in as a computer instructor and computer operator since july 2009 to till Date- 01/01/2009

Declaration:- I hereby declare that the above details are correct and true to the best knowledge and belief.

Thanking you,

Place - Kodamendhi
Date - 18/12/1989
Your faithfully
G.D.LIMJE

Is there a way to use alpha transparency on the borders?

This is beautiful, but runs incredibly slow on a reasonably averagely old pc - the curveyness only kicks in a full 10 seconds after pageload. WHich is too slow to be useable. This is looking at this site, not mine. Is there a speedier upgrade on the horizon? I'd kill, (or even pay) to make this usable. keep up the good work

well it looks so horrible when i use it in 20px by 20px DIV

Hi!

I created a patch for CurvyCorners 2.0.5pre13 to add support for the "unequal non-zero top/bottom radii with background image".

Follow url and enjoy it!

You da (wo)man!!

Great script!

Very cool, this rocks. I'm having a problem with IE8 in trying to do a mouseover and changing the backgroundColor. It works great in Firefox and Google Chrome but not IE8. I'm using this.style.backGroundColor = "yellow"; or whatever color but it doesn't work in IE8. Anyone have any suggestions?

Awesome script!!!!

Great script! ...but doesn't work with IE8.
I see this page OK but mine square.

This is a great script. Currently, I'm somewhat Java script-challenged, so I've been looking for a straightforward, understandable, versatile script, and this is it. I've used Stu Nicholls' CSS-based corners solution, and while fairly elegant, it is not easily modified. This script is very, very flexible. I'm sending some $ your way.

Sorry - after posting I saw the notice that support is on Google... I re-posted the information from below on Google so you can just delete my comments if you want.

I'm having a bit of a problem in IE7. Most of the elements on the page have curvy corners applied just fine but for some reason certain elements are throwing wobblies.

During debugging I found that the curvyCorners.scanStyles function defined on line 1289 is trying to get matches[1] of a null value in some cases.

I did a temporary hack to fix that bug and return false if it fails to get a valid match set.

After that I found that line 1270:

els = node.getElementsByTagName(tag);

was throwing an error, saying that the object did not support that method. I checked the values of "node" which usually ended up automatically set to document. When that was the case, everything worked fine. Sometimes "node" was an array passed in as an argument. This is when it failed. The only contents of the array was a single [object]. I tried just setting node = node[0]; and it now manages to get past that segment of code.

I still receive an error about line 557.

this.shell = this.box.appendChild(newMainContainer);

IE says "Error: Unexpected call to method or property access." at which point I decided that this could be a very long process of debugging and I might just end up making things worse since I don't know the code base and the ripple effects that my changes could have.

Please let me know if you have a chance to fix this issue.

Nice script, I like it but better use less load I hope

Excellent wortk, thank you.

Absolutely wicked script... thank you have sent donation just now.

Curvy corners did save the day!

I was working on a layout where the gradient background image was generated using a php script and it needs borders for the area. Finally using curvy corners, there is no need to use rounded corner images and the borders look really good.

Hi,

There something wrong with this new release version. I want to have a google text link ad in a rounded box (DIV) using the script, the google ad keep disappearing. same goes to your side here, your sidebar google ad is GONE after everything has load except the google banner on top.

Is there any conflict with google ad type? And also about a social bookmarking button from Onlywire.com.

still alright, nothing happen. BUT when look closely, you find that the button has 2 borders when it should only 1 border. This button also generated from javascript.

I still can't configure it out where's the conflict.

HELP!!!! Help me with the google ad 1st !!!!

Thanks.

Thank you! Thank you! Great script saved me so much frustration!!!! Sending you some money right away!!! Keep it up!

Thanks again,
Chris

When i try to round an input in ie7 i get an error:
"Un expected call to method or property access : Curvycorners.js, line 1"


I simply added the round class:
.round{
border: 1px solid #344857;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

to my inputs.

All works well in firefox, safari etc. just bugging out in ie 7.

Thanks for the work, this is a really great script!

Actually I was wrong, the inset does work. I forgot to remove the old padding div. Once removed the inset shows.

Thanks again for the fantastic script.

hi,
does not work when I give CSS element hover effect.
that is, if rounded corners, but does not change the border color when is under the hover effect
thanks ...

CurvyCorners is awesome. One small issue I found.

Using it removes the shadow from, moz-box-shadow: inset.

Not that many people use an inset shadow since only Mozilla supports it, but it's something to note.

Your project rocks - it just worked straight out of the box. Thanks a million man!

I like how this works but the corners don't round till after the page loads. Can this work before page loading occurs?

Love this script. Works like a charm. But...... not in IE8. I wonder why.

Hi all,
I'm using curvy corners 2.0.3 revision but i'm getting only one div rounded. Do you know why that happens? i have to round all my divs on the page.

Thanks,
Michael

hello,

i have use curvery.source.js it works fine in mozila but there is problem in ie. there is not rounded corners in ie.
it makes problem.if any solution to use how it in ie then tell me.

many many thanks for that great iframe fix.
now all is working fine

Hi there,

I just created an Iframe fix for curvy corners.
In the curvycorners.src.js file add the following:
--------------------
var iframcount = document.getElementsByTagName('iframe');
for (var i = 0; i < iframcount.length; i++){
iframcount[i].src=iframcount[i].src;
}
----------------------
Just before the end of the "curvyCorners()" function
In version 2.0.4 row 340

I hope this will help some people.

Greats Bart

CurvyCorners 2.0.4 is colliding with Mootools.

Here's a fix: rename function "addEvent" to "curvyAddEvent" in curvycorners.src.js and at the end change the "addEvent()" function call to "curvyAddEvent()".

Excellent job!
Indeed the best solution for nice round corners. The fact that the corners are transparent is great!!!
Regards!

The script is great, but I'm also having an issue with iframes in IE8. If I have an iframe inside of a curvycornered div, the iframe content disappears. It flashes for a split-second on the screen and then it's gone. This is only in IE8 and maybe 7, but all other standard browsers seem to work.

Anyone knows how IE 7 renders the rounded element with solid border that really ugly?

sorry, after my glowing have to just say that 2.0.4 does not render corners in opera 9 or 10 ... :(

I've been a fan of CurvyCorners for a while now but your new 2.0.4 really does kick the llama's ass!! it's beautiful! no javascript parameters, just 2 lines of css code that i'd be using anyway.

thank you for sharing ... way to go!!!

Message

Fantastic script. Thankyou!! Just as I was beginning to think there was no easy way to rounded corners.
It is a bit out on the iphone though (as if all theses browsers to cater for wasnt enough!!)

I have been trying to use this all day. It worked for a while with IE7. But suddenly stopped. I re-downloaded just to see if maybe I messed it up....still doesn't work.

Suggestions?

This is good except one problem:

I've use ver 2.0.4 on a Wordpress site and but it doesn't work when using Opera.

Firefox, IE8, Safari and Chrome are fine so far.

We will add this to Teambox.com thanks!!!

eyelahvet!!!

Please help me!
When I use this script, IE show a popup confirmation activeX, have no way to make IE do not appear popup confirmation activeX?

Excellent work!

I've spent weeks on code to generate corners (images) with and without borders - in any color, and can finally throw it all out the window if favor of your far more elegant solution.

Thanks!

When I use this script, IE show a popup confirmation activeX, have no way to make IE do not appear popup confirmation activeX?

Why not just quickly mention that top and bottom radius must be equal to each other if using a background image? I started getting error:
curbyObject warning:
Not supported: unequal non-zero top/bottom radii with background image

its fine work;
but in ie8 my iframe included in my page disappears by integrating this package.
can u please give me instructions to solve this problem.
best regards

Hi,

This package confilict with prototype framework and not work!

@Pekka Taipale. This script displays perfectly for me in IE 8. This script has been tested to work in IE6, IE7 and IE8 so I'm not sure why it's not working for you.

This library is a nice idea, but unfortunately the implementation seems to have broken for IE8. It works nicely for Opera 9.64, but since IE8 is a pretty major client (however broken it is), CurvyCorners seems unusable. Too bad, I spent quite some time debugging why my corners weren't curvy in my test site, until I realised I should look if it works even with the home site (this page). It doesn't.

good.give me step to make it.

I"m pleased -- displays nicely in browsers checked so far. Huge timesaver and a much neater solution. Thank you!

Saved me alot of time!!! thank dude!

Really exceptional code. Thanks so much. Also, thanks for the very well written instructions. Even a designer like me could figure it out.

Absolutely great, thanks!

Wow... After a several hours of debugging some rounding javascript that the designer put together, I turned to Google to find me a proper library. Working perfectly (in less then ideal conditions) under IE (all necessary versions) and Firefox. Up and running in less time then took me to write this comment. Haven't been so impressed in a long time! Keep up the good work :)

its wonderful.
otherwise one has to deal with large number of small images to make curvy corners.
thanx a lot...

That was definitly somethin' i was looking for and can't even imagine it could be done with JS and so simply
thanks again

Excellent script mate. I'm intermediate in web design and I must say you've made this script really simple to use. When I first looked at it I was like I doubt ill get it to work, but after following your simple instructions I found it a doddle and I like it very much, 10/10 defiantly the best rounded corner script out there by far.

Keep up the great work mate.
John

@Inon Use a class instead of an ID. For example each DIV could have the same class 'round.

Hi,
Thank you for this useful script.
One thing i do not understand is how to give more the one div ID (more the one div with the same ID is not VALID XHTML)

any suggestions will be much appreciated.

Thanks.

@Syd Lawrence Wow thanks for your very kind comments!

This is quite possibly the best rounded corners script ever! And the easiest to implement, just use the css3 attributes.

Wonderful! I am even going to donate!

it's veri nice web page,and i like it.

@flippy Turning off error messages is well documented at the bottom of the instructions page.

hi, whenever i view curvycorners in firefox 3.5 and google chrome, i see a dialog box message "Scanstyles does nothing in Webkit/Firefox".

i understand this is a debug message? but can anybody tell me how to disable it? it might be annoying to the users. tnx..

@ell Thanks for pointing that out. It has now been fixed.

in opera 10, the google ads is suppose to have curvycorner too, but it doesn't have currently.

Ok I figured out a solution!

jQuery.noConflict(); right before the adsense code, no prob!

Hey guys i have a small problem with the css generated by the script with Top and left values i want them to take 50%as value so i can get the main div displayed automatically in the center i will appreciate any help over this thank you

@Lewie Could you post your question on the Google Group, that way someone will probably answer it. When you post can you give more detail to the problem you are having and any example URL or screenshots displaying the problem.

This is a killer script!

But.... I'm having an issue with using curvycorners and google adsense with firefox.

Any clue about a work around?

ls3-solutions.com

Just wanted to say that this is a great script. I have spent countless hours trawling the web looking for something that is simple and works. This is it !

Well done, keep up the good work !

I read very careful, all the instruccion and I find the solution, thank you for all.

I have the last version. I don't understand the CSS invocation method, you can explain my?

@Alan Please download the latest version 2.0.4. Then use the CSS invocation method to apply curvyCorners to your elements. Instructions are available on this site.

Hi, I'm Alan from Argentina, and i love your script. I use it a lot, but I have a problem, I want to use the same function for many div's, like this:

var cB = {
tl: { radius: 0 },
tr: { radius: 0 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true
}
curvyCorners(cB,"#cBb3");

if I want to use to two div's I need to put like this:

curvyCorners(cB,"#cBb3");
curvyCorners(cB,"#cBb4");

I question you, I can do some thing like this, to use the same function for many div's?

curvyCorners(cB,"#cBb3","#cBb4");

I try using like that, but don't not working.

I hope that we find solutions.. Thank for all. And I praise your work, is so beautiful.

Sorry if my English is not good. Jajaja.

Alaan. E-mail: alaan.gg@gmail.com

Please note this is not a support channel please vist our Google Support page if you need help with the script.

Hello,

I was trying to implement curvycorners in my application and after a long struggle it started to work but only to see that none of the other form elements and Jquery is working.

The div to which I have applied curvycorners contains a form with jquery events to it. These are not working now. Upon researching, came to know that it is because of the adding of the data of the div to a newContainer's innerHTML where all the events and functionalities are cleared and only html is copied.This is not working in IE 6,7,8

Awaiting for help.


Thank You,
Venkat

is it possible make two box, and if it is how?

Hello, The latest Opera gets this error when i tried your nice js.

Event thread: click
Error:
name: Error
message: curvyCorners Error:
curvyCorners.adjust() has nothing to adjust.
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

It does not work on internet explorer 8... Like at all... There is no right side menu bar and the whole thing is pretty messed up-- it does work on ie7 though, but not in ie8 compatibility mode

Is there any performance hit if I create 10 boxes at one go? I'm using Drupal, and I was thinking of using the CurvyCorners (CC) solution for the blocks, and within contents as well. I'm not sure how the CC code generates the boxes, so i'm clueless about the performance. Does anyone know?
Also, I saw another JS-based solution somewhere. I will look through my history. But firstly, I have to make sure if I'm able to share what I had found, since this page belongs to CurvyCorners. Am I able to share here?

alerts like "zero-width box with no accountable parent"
wasting my time

damn idea bringing curvy errors in ie directly to users

alert "zero-width box with no accountable parent" etc
wasting my time

damn idea bringing curvyalerts directly to users in IE

how we can make curvy border. is there any easy way with clirity.

Great script!! is there a way to make it run faster when loading the page?

Nice work! Thank you very much.

It has got some limitations.

- On RTL (right to left) pages (i.e. Arabic) the pages are rendered incorrectly.
- The hover style seems to work when the page first load, then as you nagivate thru the site it degrades to a point that you have to move the mouse on the edge of the text (but not outside) in order to click it.

Other than that is it an excellent product that produces stunning visual results.

I was able to fix those two problems above by using JQuery Curvy Corners (just google it), download those specific .js files in that page and everything works.

Thanks guys, for this excellent work.

It has got some limitations.

- On RTL (right to left) pages (i.e. Arabic) the pages are rendered incorrectly.
- The hover style seems to work when the page first load, then as you nagivate thru the site it degrades to a point that you have to move the mouse on the edge of the text (but not outside) in order to click it.

Other than that is it an excellent product that produces stunning visual results.

I was able to fix those two problems above by using JQuery Curvy Corners (just google it), download those specific .js files in that page and everything works.

Thanks guys, for this excellent work.

It has got some limitations.

- On RTL (right to left) pages (i.e. Arabic) the pages are rendered incorrectly.
- The hover style seems to work when the page first load, then as you nagivate thru the site it degrades to a point that you have to move the mouse on the edge of the text (but not outside) in order to click it.

Other than that is it an excellent product that produces stunning visual results.

I was able to fix those two problems above by using JQuery Curvy Corners (just google it), download those specific .js files in that page and everything works.

Thanks guys, for this excellent work.

Great script! I was using this on a new site, but I spent hours trying to figure out why my JQuery form validation wouldn't work in IE 6/7/8. Unfortunately it seems it was conflicting with CurvyCorners. I need form validation more than rounded corners, so I had to remove it.

Stupid IE! ARGH!

This is super cool and am looking forward to using it!

Nice script, A slight problem in IE but then again IE is a slight problem.

@Victor please see documentation.

i would like to create my own website.can u help me,please?:*:*

This is great, sure to come in handy... similar but special! ;)

Hi, there, I have just downloaded your "software" from curvy corners and tried to make it work.
Unfortunately it is too complicated for me as I have no html, css knowledge.
Ccould you explain to me please what I am supposed to do in simple layman , plain english fashion.
I am not totaly stupid ,
I know how to copy things into the head section and I can upload pages (ftp) with fetch.

Ok I stop winging
Please help me.
Victor

I'm looking for this,thanks.
Great site!

I'm getting the same error in IE on this page (cannot load) that Owen Manderfield was getting (noted above already). Also, the script is not working on my site in IE. I have not tested Opera.

Simply and plainly GREAT! Good job man!

hi you there
this code is very useful for us
i'm so happy to saw this
but i have a question:
could we curve inputs such text box or text area, or button ?
in firefox we can but not in IE
could you please help me?

hi you there
this code is very useful for us
i'm so happy to saw this
but i have a question:
could we curve inputs such text box or text area, or button ?
in firefox we can but not in IE
could you please help me?

so I read about opera code needing to be in the page but why does IE6
mess up my alignment so bad I know that's not the CC issue tho that's just crappy old IE6

this only seems to work right in Firefox

Opera dosen't round the corners

IE6 will let the javascript round the corners but my alignment is all off

Man this is frustrating

@R This has been fixed in the latest build available in the trunk. http://code.google.com/p/curvycorners/source/checkout

An alert "Wasting my time!" appears each time a page using this script is opened in Safari on both Mac and Windows... :/

@Leanne I doubt I would implement shadows and glows as this would really slow the script down. I don't think Mozilla has native support for this either.

Great script! I was just wondering if it's possible to plugin some kind of drop shadow effect, or outer glow type script for this? :)

im using IE8 and this site renders fine, i lalso love this script :D

I have never had such a easy time implementing something into a website. Really great piece of work and will continue to use and shout its name from rooftops.

I've used this for several clients. It runs smooth, looks great and is easy to use! Thank you!

Tadd
www.studio646.com

Awesome! Beautiful clean design. Thank you. Learning how to use it right now. Thank you for doing this.

Very nice script but dang if IE isn't such a PITA, IE 7 gets the error about not being able to load the page. Operation aborted dialog box, then it goes to a 404 page. I read about this on MS's site. M$ is so annoying that they can't make anything bloody standard for the better of the world.
Is there a way passed this or a fix for CC?

This a great script! especially the update version.
I had query about how can I use this script to round form elements like inputs or buttons or labels.[it works in firefox as it use -moz- thing but for IE]
Any thoughts or a code will be appreciated.
I'll be waiting. . Thanks

@NickG Thanks for your post. Actually the demos page does not render the corners in IE deliberately, this is to allow you to click the Run CurvyCorners button so that you can see CurvyCorners perform it's magic in front of your eyes.

Hiya - great site! However, your demos page doesn't display the rounded corners in IE8. It works fine on the home page. Thanks!

@Trangsene The latest bleeding-edge version available on the Google Code site has fixed the issue and now allows for background images to be positioned bottom.

@Charlie Please use our Google Support page and post your query on there. Please include an example URL and or screenshot showing the issue.

Thanks for the comments regarding the demos not working. This was because I changed the name of the CurvyCorners script and forgot to update the demos. This has now been fixed.

In regards to this site and IE8, I am aware of some issues. They appear to be related to the prototype.js script I am using, I will be looking into this shortly.

Can I also just reiterate that this comment system is not to be used to report issues with the script as we have a Google Group for that, please click on the support link top right.

This site is not working at all in IE7 - throws a "canot load" error operationn aborted. or with scriptin errors on line 3936 object required.

function getEventID(element)
if (element._prototypeEventid.....

Did you know that this site doesnt render correctly in IE8?

I cannot make this work properly in IE7 using the supplied instructions (great shame since both Chrome and Safari are easy and perfect)

Instead, while I can get the div curved, the shape of the div become very strange, with one block extended. In addition, lots of blank lines are inserted before the text (to which the curved shape forms the background) starts.

Please can you send me a real idiot's guide to getting this to work reliably with IE7 since I really want to use curvycorners.

Many thanks in advance and kind regards, Charlie.

It seems it's impossible to have a background image bottom-aligned in IE !
With the 2.0.0 version, the background image was duplicated. With 2.0.3, a background image is always aligned on top. It's a shame, you can't use it for example to do a background image with gradient aligned at the bottom of a div, especially if that div has a variable height :-(

Demos aren't running.

I have been using jquery.corners, and it messes up div placements in IE. Its a pain in the ***!

This CurvyCorners is what i have been looking for. Great job on this!

Nice one!

* First of all - script support is alive, there is a people who work on it today
* Script is small. Optimized JS code is in between 20kb
* comaptability with common JS frameworks
* implement it into page is a piece of cake
* It`s tracked on google`s project, so you can easily register any issue noticed and view registered issues, see changes and so on.

I have made a search of different JS solutions for rounded corners - this one fits best for me.


and again and again and again - ITS SMAALAAAAALLLLL
U don`t need to load framework+ plugin.