[Darkleo]

I am looking for a simple, easy to use, rounded corners technique.

[illvibe]

you've gotta be more specific. are you talking about in a graphics app or on a website or what?

[Darkleo]

Originally Posted by illvibe

you've gotta be more specific. are you talking about in a graphics app or on a website or what?

In a website ( like the technique used on this site)
I'd like to know what an easy to use rounded corners technique for websites.

[CharmingMan]

it depends whether the content it contains is dynamic and whther the rounded corner box needs to stretch.

If it needs to stretch, does it stretch only downwards or will it stretch width ways as well when content is re-sized

[DrBurkstrom]

Border-radius: create rounded corners with CSS! - CSS3 . Info

Won't work for internet explorer users, but you can't please everyone...

[roto]

Originally Posted by DrBurkstrom

Won't work for internet explorer users, but you can't please everyone...

Shocking with IE being a pile of shyte and all. It's just too bad it can't be ignored.

[suedenem]

If you're willing to sacrifice curvy corners for a few visitors sans JS, try googling for Nifty Cube (sorry, can't post URLs yet).

[roto]

Nice one suedenem...and since you can't post yet, I shall help:

Nifty Corners Cube - freedom to round

[djeglin]

Probably a better option to use a solution based on the original "Nifty Corners": Nifty Corners

The only thing you really need to do to it to make it valid etc, is change the (stupid) < b > tags to spans, and you're off! No javascript, works in IE... Is great

[d3mcfadden]

Best technique I have ever seen and stolen for that matter is on All recipes – complete resource for recipes and cooking tips. They do rounded corners with no images / javascript at all, plus it works in all browsers. Look at the source for how to implement... it's pretty easy.

[bazzle]

This is the method I use.

Rounded corners in CSS :: Adam Kalsey

It's a bit fussy but works fine across all browsers.

[Repp55]

CSS Liquid Round Corners

[Repp55]

Actually.. just take the advice given and use the nifty corners.. they are actually very nifty..

[dudefromthenet]

Hi
Doing corners without images is imho not a good idea, because it makes the markup very bloated and does not look that good.
You should try Rounded CSS Boxes which is a very flexible corner & markup generator.

[djeglin]

doing things with images when you dont need to is a worse idea. images = extra http requests, which = longer load times, higher server load for high-traffic sites, etc. Extra markup you can keep semantically neutral by using spans, and the extra file weight will total up to no more than a few bytes... i know what i choose where i can...

[dudefromthenet]

I do not think it is a problem to use images. With a good webserver like lighttpd, additional static files will not really slow down things on your server. Your PHP-written CMS or any other script will take longer than the download of some 300byte images. In my opinion, the extra markup (a few bytes) is not a problem. Who cares about the markup? Who will look into your code? As long as it works with all browsers, 99.9% of your users will not have problems. Textbrowsers like Lynx also do not have problems with it and you should also look at the pros in web development. Have you ever looked at the code of popular websites? In most cases it looks really really bad, but it will work, and that is what really matters.

How would you create rounded corners, if you do not want to use extra markup or images? The only possibility I know is to use CSS extension like border-radius. They do not look good in most browsers.

[djeglin]

its not the size of the image thats the only problem though... its the fact that for each image you're actually hitting the server again... each http request comes with a request/response header, and it takes the server some time to locate the file and serve it. If you're dealing with enterprise scale sites (Which you are obviously not) then this can make a big difference to load times when you have millions of page views per day.

In terms of the code... Yes, you can look at a number of "popular" websites and find horrible code. Just because it works doesn't mean its the right way to do things. I deal with semantic markup, my friend... Not botched code that "works".

Also, with your estimation that 99.9% of browsers will not have a problem with it, try thinking about what will happen if someone views the page CSS-naked. Yes, text-only browsers such as Lynx will ignore the images, but people with disabilities who strip out the css to make things more readable for them will still see the images, with no reason for them to need them. They will become a needless distraction. Also, to be properly compliant, all images need an alt tag - alt tagging your corner images will probably take as much markup as the nifty corners technique.

And finally, what about flexibility and maintainability? Using images, if you want to change the colour scheme of the site, you would need to create new corner images. Using a CSS technique, you simply need to change a couple of values in a CSS file that you would be modifying anyway.

[dudefromthenet]

Originally Posted by djeglin

its not the size of the image thats the only problem though... its the fact that for each image you're actually hitting the server again... each http request comes with a request/response header, and it takes the server some time to locate the file and serve it. If you're dealing with enterprise scale sites (Which you are obviously not) then this can make a big difference to load times when you have millions of page views per day.

You are right, nothing comes at no cost, but what I want to say is, that it is not that bad as you say, because we are talking about a few percents. The company will then buy an additional server and they are done.

Originally Posted by djeglin

Also, with your estimation that 99.9% of browsers will not have a problem with it, try thinking about what will happen if someone views the page CSS-naked. Yes, text-only browsers such as Lynx will ignore the images, but people with disabilities who strip out the css to make things more readable for them will still see the images, with no reason for them to need them. They will become a needless distraction. Also, to be properly compliant, all images need an alt tag - alt tagging your corner images will probably take as much markup as the nifty corners technique.

No, that is not correct. The images are background-images defined in the CSS. So if the browser removes the CSS the images are also gone. alt-tags are not needed, if the images are defined as background-images

I have also read that people with disabilities prefer websites with frames, because they give the website a better structure (menu - content). So should we use frames for all of our websites?

Originally Posted by djeglin

And finally, what about flexibility and maintainability? Using images, if you want to change the colour scheme of the site, you would need to create new corner images. Using a CSS technique, you simply need to change a couple of values in a CSS file that you would be modifying anyway.

Creating new corners takes less than 10 minutes. How often will you change your layout?


I do not want to say that using images for the layout is perfect, I say that it is okay and cannot understand why so many people do not like it.

[arsholdings]

use photoshop or illustrator

[seen.to]

I use a variation on the sliding doors tab method. Unfortunately the server that hosts my examples isn't available at the moment so without an example this isn't much help.

edit: Here's the original sliding doors article on alistapart: A List Apart: Articles: Sliding Doors of CSS

This looks similar enough to what I did:
MODx Content Management System | Simple Rounded Corner CSS Boxes

Also, if the box only needs to expand up/down you can do it with 2-3 parts with one background for the header and one for the footer/body - I tend to go with a taller image that includes the footer (so long as the file size is relatively small and it is relevant to the design).