24 Nov

curved borders, with valid CSS and unobtrusive javascript

In recent evenings, I’ve been working on my Borders project, working to optimise the speed of the thing up to the point where it can be used in production websites.

I believe the script is just about ready. Thanks go out to Dylan Parry for pushing me to work on this!

try this out

Please note that no browser-specific CSS was used in this. The borders are defined in the W3C’s Borders module draft. Not one browser supports border-radius yet (no – Firefox’s -moz-border-radius does not conform to the W3C’s specs).

The script works in Konqueror, Safari, IE, Firefox and Opera.

In the case of Opera, only external CSS works. The demo is with CSS added to the head of the document (which is not recommended in production sites). I do not believe this is a problem.

Anti-aliasing is available for Firefox, IE, and Safari. Konqueror and Opera do not support opacity yet, so in their cases, borders are kinda pixelated (but still better than nothing!).

How to use this script: simply grab a copy of this file, and link to it in the head of your document, then use border-radius in your CSS as if the browser supported it natively. It’s that simple!

Example

		<script type="text/javascript" src="borders.js"></script>
		<style type="text/css">
			div{
				background: #ccc;
				border: 2px solid black;
				border-radius: 20px;
				padding: 20px;
				margin:5px
			}
		</style>

Noted Problems

  • I have not figured out a way to read plain un-edited internal CSS in Opera yet.
  • Optimisation would be much easier if it was possible to use the DOM to read un-edited CSS, as it was supplied, instead of after the browsers have adapted it to fit their own internal models.

If anyone can help with the above, or comes across other problems with this, please comment below.

28 thoughts on “curved borders, with valid CSS and unobtrusive javascript”

  1. nici -

    wow! the new code works great!!
    one problem in win IE6… if you use windows line feeds, then javascript doesn’t parse the CSS properly and it croaks.

  2. Dylan Parry -

    Hi… Found another little bug! If you finish the final line of CSS for any with a semi-colon, then it doesn’t work in IE6. If you simply leave off the semi-colon for the final rule then it works fine :s Not sure if this is the same thing that nici mentioned.

  3. Kae Verens -

    I don’t think it’s the same bug.

    I’ll test it on Monday (I don’t have IE or Windows on any of my home machines).

    I guess I never came across these bugs before because I tend to write very terse CSS 😉 The example CSS was Dylan’s – I left it in his formatting, as it is more readable than the CSS that I usually write myself.

  4. Dylan Parry -

    Hey,

    Just wondering if you got round to testing this? I haven’t tried it since making the above comment, but would love to know how you got on fixing the minor bugs that nici and I found!

  5. Kae Verens -

    I need to be pushed to get things done – sorry! Took a look. nici’s bug was simple to fix – just added ‘\r’ to a regexp. Yours, I haven’t come across yet. Can you show me a broken example?

  6. Dylan Parry -

    It seems that the bug I thought I found was just part of the one nici pointed out as it is no longer there. I think it was caused by Explorer interpretting the final ";" as a new line or something…

    Anyway, another problem I have found is that if I add:

                    position: absolute;
                    top: 10px;
                    left: 10px;
                    width: 200px;

    to the CSS for the div, then it works fine in Firefox et al, but IE breaks completely and shows nothing on the page.

    One slight problem, which I feel should be mentioned is that if I move the CSS to an external file when viewing the file locally it no longer works in any browser that I try it in. It works fine however if I look at the page via Apache or IIS as localhost…

  7. Kae Verens -

    I’ll look at the IE CSS problem tomorrow.As for the local file problem; I believe this is a security thing – the external CSS is grabbed via XMLHTTPRequest, and no browser will allow you to read any local file with that method (for obvious reasons). Unfortunately, there does not seem to be any way around this. It would be great if there was a way to access the CSS without using AJAX, but all my research into that has come up with nothing.

  8. Kae Verens -

    Dylan – solved. What happened seems to be that when position:absolute is set, the margin is overridden and set to auto. My code tried to get the right position of element by adding a parseInt of the marginLeft and marginTop, which resulted in a NaN. I’ve fixed that.

  9. Dylan Parry -

    I started reading up about AJAX yesterday, and realised what the problem that I described was. Obviously it won’t be one that can be fixed, but it’s probably worth mentioning that as your script uses XMLHttpRequest that you can’t test the files via file://.

    Regarding the position:absolute, well done! I suppose I am now ready to actually start using your script on my new redesign 🙂

  10. Dylan Parry -

    Spoke too soon. Whatever you did to fix the problem with IE caused it to break in Opera (Win, 8.5 and 9). Now, the script causes the content to blink briefly and then disappear, as if it is being positioned somewhere off the canvas.

  11. Kae Verens -

    the Opera bug had been noted in the article – there is no way at the moment to read CSS in Opera which has been declared within the document itself. I’ve fixed that by moving the CSS in the example to an external document (at the cost of a little time downloading that CSS file).

  12. Dylan Parry -

    Oh yeah, silly me! 🙂 I completely forgot that when composing my test file. Normally I use an external file, so this problem didn’t occur during my last test. Great work, Kae! This is easily the best border-radius script I have seen.

  14. Richard -

    Hi,

    I found an error in Internet Explorer that causes blank page and a javascript warning:

    Line: 65
    Character: 3
    Error: ‘parts.1’ is null or not an object.
    Code: 0

    and here’s my css:

    #firstcontender #techdescription {
    font-family: verdana, arial;
    font-size: 9px;
    color: #6C7540;
    position: relative;
    display: block;
    float: left;
    padding: 2px 4px 2px 4px;
    background-color: #A9B07B;
    border: 1px solid #7f8657;
    border-radius: 4px;
    margin: 1px 0px 0px 0px;
    }

    Is there anything wrong?

  16. Kae Verens -

    Richard, I have found and solved this error. you must have other CSS rules in that sheet, with new-lines between the rules.

    As an aside, I have noticed that the script is slightly off in IE7beta2, as they have fixed their broken box-model. I’ll fix that now.

  18. Kae Verens -

    Richard – you don’t need to change your CSS. just download the borders.js file again – it was a bug in my code. if the problem persists, please put an example up on server somewhere so I can see it.

  20. Kae Verens -

    Richard. Thanks – I found the bug with no problem. My script couldn’t handle the comment tags in your style section. Fixed now. Please download the new borders.js and test again. I do not have Internet Explorer on this machine (all my home boxes run on Linux), but I think it should work – works in Firefox anyway 😉

  21. Richard -

    Hi Kae,

    First of all I must thank you, but the internet explorer error persists.

    Line: 65
    Character: 3
    Error: ‘parts.1’ is null or not an object
    Code: 0

    But it works now on Firefox again. 😉 I will upload the new borders.js on that address so you can check everything up.

  22. Dave Seleno -

    Hi Kae,

    Thank you for the work you have done on this. I like how unobtrusive it is.

    I have discovered that using CSS class names with “-” in them breaks everything. I was able to grok most of the code in border.js, but the regex made my brain hurt. Gotta love regex; solves one problem by creating another. Anyways, could you please update your library to handle class names with “-” ?

  23. Dave Seleno -

    Woops, forgot to mention I had to add the following two lines, even when not using class names with “-” in them. I only tested IE6, btw. Let me know if you want the small stylesheet I’m using.

    function drawRect_generic(el,x,y,w,h,bc,bi,op){
    …
    if (h

  24. Kae Verens -

    Dave, could you put an example of your CSS online, please? the code does not seem to contain anything which would restrict you from using hyphens.

    Also – that snippet of code has been truncated at the < symbol – write the symbol as &lt;, and it will show up properly.

    Kae

  25. Potato Bob -

    Hmm nice script, but it tends to refresh a page about 1 sec ~ after it loads, so its quite annoying and it messes up my css to where the height and width values are considered invalid… so most of my page is not positioned correctly…

  26. Zachary Canario -

    I used ur code because the border radius doesnt work in ie. Well When using the code I tested it in ie and the page loads the its looks like it loads again and then all I see is my background. Same in firefox.
    I use loose xhtml for all my scripts.
    If u have any clue why all my content dispears when the page finishes loading. That would be great.

    Thanx
    Zach

  27. bobacronius -

    Hey, first of all, wonderful script! I have used many a rounded corners solution, but this one does exactly what I want, which is allow me to use CSS3. That’s good news for when browsers finally start supporting the spec, because then I don’t have update stylesheets!

    Anyway, I did find one little issue. If you assign a border radius to the top left corner and to the bottom right corner only, the bottom right corner will round, but not render the border color. Sound weird? I noticed that it wouldn’t do this for any other combination, just top left and bottom right. Here’s my css:

    #box
    {
    position: absolute;
    top: 100px;
    left: 500px;
    height: 200px;
    width: 500px;
    padding: 10px;
    background: #0f0;
    border: 2px solid #aaa;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    }

    Let me know what you think. I noticed it did this in Firefox, IE7, and Opera. Did not test in IE6 or Konqueror.

  28. Kae Verens -

    I’ll have a look at this over the weekend. I haven’t actually looked at the source in months, so can’t answer your question immediately.

Comments are closed.