I wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work in tandem with technical simplicity.
Seeing is believing, so without further adieu…
30Oct '08
30Oct '08
I wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work in tandem with technical simplicity.
Seeing is believing, so without further adieu…
[...] Update: Read my subsequent post for a more advanced example of this technique! [...]
Sweet. I like the simplicity. It’s also easily adaptable to personal design requirements. Nice work, Kyle!
Btw, what’s the need for “font-size: 0%” in the corner class ?
Raj, that is a great question! I didn’t originally include “font-size: 0%;” in the CSS, but I subsequently added this in order to fix a small display problem in Internet Explorer 6. For some reason, IE 6 likes to add a little “space” inside the corner boxes, which results in a nasty appearance of the corners. Dropping the font-size down to 0% hides the space and makes everything look much better.
Kyle:
I read through your guide and it seems simple enough but I have still managed to get stuck; I wanted a grey rounded border around some of my content divs. When I try to do what you did, I created a a grey ball with a white inner circle and used it when trying to create a white box with grey rounded border but it didn’t work.
It only created the grey corners but not a full line on the top, left, right and bottom sides, is this because I may have made the white circle to big and it cuts off the grey lines in between the corners?
Any help is appreciated.
/Chris
Hi, Chris. Boxes with borders are a little different. You’re headed in the right direction, but you’ll have to modify the CSS a little bit in order to accommodate for borders. First of all, you should add “border: 1px #ccc solid” to the “box” class in CSS (change #ccc to the color of the border you’d like to use).
Once you do this, you should see a border around the boxes, but you’ll also notice that your corners appear INSIDE the border. To fix this, just nudge your corner classes by one pixel outward. For instance, change the “TL” class to “top: -1px; left: -1px;,” etc. Good luck!
Kyle, this is just fabulous!
I had just decided to go with regular square borders for IE because of the hassle I experienced with corner images and all the extra code this produces when I stumbled across this, just great.
What is your take on using this only for IE through a conditional comment and using “border-radius” for css3-ready browsers such as FF3 etc – or using your code across the board for all browsers?
On another issue, any other great ideas concerning box shadowing?
Nice work!
Tomas
Kyle,
When I cut and paste the code, the resulting boxes are squared corners, not rounded. I used several different browsers and get the same result. I can’t seem to figure it out. Can you help me?
Thanks
David
Hi, David. It sounds like you’re not getting the images associated with the styles. If you look at the CSS, you’ll see it’s referencing a few images (i.e. http://www.kyleschaeffer.com/karatecorners/corners.png) that are required to make the rounded corners appear.
I’ll try to add an easily avilable ZIP file for everyone to download in the near future. Thanks for the heads-up.
Thanks for this greate technique. Is there a way to use this technique and having not only rounded corners, but using also image borders? (like glow effect or something, on the borders?).
Thanks a lot in advance,
Márcio
I’m working on a website that will have rounded corners, but I just found a great technique, as long as you assume your users will have javascript enabled:
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.
Sky,
While I like what Curvy Corners is all about, it’s definitely not something I would recommend using. In web design, it’s best to segregate your design into three independent functions: structure, appearance, and behavior.
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.
The reason I like Curvy Corners so much is because it does help to keep the HTML focused on structure rather than appearance. While Karate Corners is a very nice way to do it (and is the first way I tried), it requires the addition of 4 extra div’s, and their associated classes, as well as an additional image download to the user.
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.
Hello!
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.
Hi, Robert. When I say “reverse-transparent,” what I really mean is that I have created a square image that is filled with the background color of my page. Next, I delete a circle from the middle of this square. Here’s an example:
http://www.kyleschaeffer.com/karatecorners/corners.png
Hi kyle, I’m posting this from my phone so I’m sorry for any typos in advance. I am using your rounded corner code which works great but breaks in ie for some reason. http://Www.rd-designs.net/bwolf I can move the corners but then it breaks in the other browsers. I was wondering if you can let me know what I’m doing wrong. I know the site breaks on anything smaller then 1024 res but that’s another problem heh. Let me know what you think please.
Thanks
Ryan
I got it to work
[...] Update: Read my subsequent post for a more advanced example of this technique! [...]
I notice someone said that IE6 like to add a little ekxtra “space”, u can get around this I belive.
By using Universal Selector.
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.