Add like this:

* {
margin: 0;
padding: 0;
}

In this way, u gets to start at 0,0 and not the damn extra “space” that suddenly appere in no where.

On topic:
Does this guide works in a ul li element??
I mean, by using background colour inside ul li element u want to corner it too.

Havent tried yet, but will do to see if this work. Just wanted to ask if u already testet it.

Thanks
Ryan

http://www.kyleschaeffer.com/karatecorners/corners.png

Sorry for asking perhaps a silly question, but how can I make my own “reverse-transparent” PNG corner image? I’m a newcomer to CSS and I’ve managed to get this method for corners working in every sense apart from the colour!! I’ve been searching and fiddling with Inkscape on my Mac for ages trying to work it out, but to no avail!

I love the idea, though! Thanks for posting it on your website, Kyle.

Robert.

I would also argue that drop down menus are a behavioral attribute as opposed to a appearance one, though doing them via CSS is a lot better than to use javascript to achieve a similar effect. This is because javascript does add extra overhead, and is slower than CSS. Though this is true, Curvy Corners only adds the extra weight to browsers like IE6/7 where the border-radius property is not implemented. In more current browsers, it just says “oh, you’re using a new browser, I’m just going to turn off now”.

The separation between the elements of a website is a fuzzy line, as you must modify your HTML to make the CSS layout work, CSS can sometimes create behavioral attributes, and sometimes Javascript can do things to modify the appearance. I feel that the added flexibility of using Curvy Corners (if you want to try a different size border, just change the style sheet), as well as the lower bandwidth requirement (as your users do not need to download the border image) outweighs the slight overhead of having a script run to round off those corners (only on the older browsers!).

We have a dilemma because though we, as designers, would like to separate it as you describe, it is just not possible with the current technology. CSS3 is going to help with some of that (e.g. the addition of the ability to add 8 backgrounds to one div, so you don’t need to nest divs to achieve layered backgrounds), but even when that is fully adopted I’m sure that there will still be layout markup in our html.

Thanks for taking the time to both write about Karate Corners in the first place, as well as to respond so thoughtfully to my comment.

HTML handles the structure of your document, while CSS handles the appearance and visual elements. As you can imagine, Javascript is all about behavior. Curvy Corners are somewhat against web design best practices because you’re handling web design APPEARANCE with client-side scripts. It works on most machines, but you’re adding overhead and extra weight to your design that is otherwise unneeded.

Either way, “border-radius” is part of the CSS3 specification, so I suppose the point is moot. In the future, we won’t need any of these wild methods to create design intricacies like rounded corners. Until then, I would have to say that CSS/HTML corners are still the best approach.

http://www.curvycorners.net/

You can use the CSS3 properties to make rounded corners and chrome and firefox will enjoy it, but if your user is in IE, this script will run to fashion the borders itself.

No extra image download required, and you, as a website designer, can be happy in using CSS3.

Thanks a lot in advance,
Márcio