If you take a look at the following page: http://2khiway.net/users/jbell/borders.html

In Firefox, I get the following result:



And for some reason, I get this in IE:



Even though I have set the margin and padding for all elements to 0.

Any ideas, or anyone have a better solution for using image borders for rounded elements? I don't just want a border, I want to keep that tiny inner shadow I have as well...


Any help is greatly appreciated.

Nevermind guys, I figured it out. I needed to set the font-size to 1px for each of the elements besides the main content element. All fixed.

Way too many div's for my taste.
Keep it simple:

http://eisenbach.com/~andre/borders/

or we could result to my good ol' friend java script:

http://www.roundedcorners.net/

anti aliased corners that activate by putting radius="w/e radius you want" in a div tag

i use it on most of my projects

That works fine until you want to change the width of the box.


@mandos: *bookmarked*

That's amazingly cool. Thanks for sharing

Woah, that's really cool.

At which point you can switch to something more like this:
http://www.alistapart.com/articles/customcorners/

Notice however that the original examle was fixed width.

Why one would want to use a scripting language (JavaScript) for a styling feature is beyond me...

clearly you have no idea how javascript works

a simple window on load function goes through each div tag with getElementsByTagName(), using the DOM it detects if it has the radius setting and then applies small floating divs around each corner. TO anti alias it, a simple javascript function that mixs the foreground color with the background color to produce a new hex will suffice. The end result, anti aliased, fully controllable, cross-browser, rounded corners that do not need images (saves tons of bandwith) and can be set by putting a simple radius="your radius".

Im also working on a shadow/glow feature, but the current beta i have now takes way to long to load, so that wont be out for a while

He has no idea how JavaScript works because he isn't advocating the use of it in an irresponsible fashion? One would be better off inserting the dividers in the first place, no need to rely on the use of JavaScript. Considering the simplistic result and the fact that the JavaScript is 25 KB, you'd be luck to save any bandwidth.

obfuscated its a litlte lower (like 15kb)

but its better then having 20-50kb images for each corner

and if you using div dividers then you have no control over the radius (unless you want to change the style attributes for each div tag)

Kids, kids, don't make me have to call your parents.

Javascript should always be used sparingly.

Additionally, it [Javascript] should not be used to solve a problem that can be reliably solved with another method.

Javascript should only be used for behavior, never for presentation or structure, using it for things other than behavior is irresponsible, usually sloppy and mostly unreliable.

Rounded corners are presentational design elements, not behavior.

Is the main reason for what you said accessibility? Surely audio screenreaders etc would still see the content with this system even if they have no javascript parser? Is there another reason? What's so inherently wrong with using javascript for presentation?

First rule of quoting principles: always say why they exist in real world terms. Otherwise it's too easy to get a bit Richard Stallman-esque.

I did offer an explanation, however brief it was.

"Javascript should only be used for behavior, never for presentation or structure"

Javascript is not a presentational or structural language, it's a behavioral language.

It's all about using the right tool for the job.

I have to totally agree with James on this one. I hate sites that use javascript for everything just because it's javascript. The less javascript the better.

I don't like any of the ways I see to make rounded corners. They all seem to involve either graphics, a zillion div's, or js. The trick where you use four corners (two img, two background) doesn't work right if you have a gradient background. The div's idea seems too hackerish, and the js method is 'cool' but really not a viable solution, as James already pointed out.

I'm staying with background GIFs until I see a better way.

It's not about accessibility, it's about using the right tool for the job. This script is essentially turning this:



Into this:



In a perfect world, support for CSS's layered background images would be a lot better then it is, but that just isn't the case so we're left with work arounds. With this particular JavaScript, and JavaScript in general (For situations like this.), you're just making things more complicated then they've got to be:

1) If JavaScript is disabled you're left with the first example. If you had just went with the second example in the first place you could have left JavaScript out entirely.
2) Even if the user has JavaScript enabled their browser has to be using a relatively up to date version, as this script doesn't bother to check for support of functions like getElementsByTagName.
3) You're limited to an anti aliased border, not exactly the design statement of the decade. That isn't the case if you go about things with the second example.

The bandwidth argument isn't really a viable one as images are cached and if the developer knows how to save images for the internet the result will be just as small as, if not smaller then, this script.

Simple! CSS3!

border-radius: 10px ;

but nobody supports it....yet... (Firefox supports a "beta" version of it, -moz-border-radius, but it's not proper CSS3)

I'm sticking to images for now.

I can't wait until CSS implements the rotation of images...that is, if they ever decide to do so. Being able to use a single corner image for all four corners would be rather nice.