klog » Blog Archive » curved borders, with valid CSS and unobtrusive javascript

24 11 2005

curved borders, with valid CSS and unobtrusive javascript

Posted by: Kae Verens, in javascript, web development

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.

This entry was posted on Thursday, November 24th, 2005 at 11:40 am and is filed under javascript, web development. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

28 Responses to “curved borders, with valid CSS and unobtrusive javascript”

nici says:
December 1st, 2005 at 7:05 am
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.
Dylan Parry says:
December 1st, 2005 at 2:34 pm
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.
Kae Verens says:
December 3rd, 2005 at 8:51 am
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.
Dylan Parry says:
January 9th, 2006 at 12:27 pm
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!
Kae Verens says:
January 9th, 2006 at 12:59 pm
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?
Dylan Parry says:
January 10th, 2006 at 4:05 pm
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…
Kae Verens says:
January 10th, 2006 at 4:33 pm
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.
Kae Verens says:
January 11th, 2006 at 9:37 am
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.
Dylan Parry says:
January 11th, 2006 at 11:08 am
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
Dylan Parry says:
January 11th, 2006 at 11:32 am
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.
Kae Verens says:
January 11th, 2006 at 1:26 pm
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).
Dylan Parry says:
January 11th, 2006 at 1:42 pm
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.
Kae Verens says:
January 11th, 2006 at 1:47 pm
yay! I’m imagining the Dylan Parry Seal Of Approval now

Richard says:
January 31st, 2006 at 7:25 pm

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?

Kae Verens says:
February 1st, 2006 at 12:54 pm
Richard, could you put your sample online, so I can see the error in context?
Kae Verens says:
February 1st, 2006 at 1:10 pm
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.
Richard says:
February 1st, 2006 at 6:19 pm
Hmmm, what kind of rules I must change in there ? In Firefox it worked perfectly.
Kae Verens says:
February 1st, 2006 at 8:33 pm
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.
Richard says:
February 2nd, 2006 at 5:52 pm
Hi Kae,

Now it seems to crash in Firefox too, and still do not work with IE. See it at:

http://www.fabrim.com.br/richard_temp/curved/

PS: it’s brazilian portuguese encoded, so it might look strange
Kae Verens says:
February 3rd, 2006 at 9:10 am
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
Richard says:
February 3rd, 2006 at 7:14 pm
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.
Dave Seleno says:
March 14th, 2006 at 8:31 pm
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 “-” ?
Dave Seleno says:
March 14th, 2006 at 8:41 pm
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
Kae Verens says:
March 15th, 2006 at 1:34 pm
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 <, and it will show up properly.

Kae
Potato Bob says:
June 13th, 2006 at 4:05 am
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…
Zachary Canario says:
February 21st, 2007 at 7:35 am
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
bobacronius says:
March 2nd, 2007 at 3:53 pm
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.
Kae Verens says:
March 2nd, 2007 at 4:53 pm
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.