Border-radius, Javascript or Images what's your take?

[Miko]

I'm just wondering what do you think it should be used for rounded corners and why?

I'm voting border-radius because I love css but the lack of Internet Explorer support is quite a deterrent in using it widely across all my work.

There are several hacks that allow me to use border-radius in IE but again with lot's of limitation.

I often find myself using images in work that I do for clients simply because of being a 100% cross browsers solution.

Take care,
Miko

 

[Floris]

In my opinion, as a designer decision I want to look forward, and this means low footprint, modern browsers, and javascript free working web site layout and designs. Rounded corners works in a lot of browsers, and to send a signal that those who aren't up to date with css3 yet, that there's room for them to catch up or lose their spot in the top 5 browsers.

border-radius, is what I vote for.

As the fallback is just squares, without losing functionality. And very easy to (and also dynamically) edit to match the site's design as it changes over time - a winner over more client-side scripting like js where NOSCRIPT is popular among windows users these days, or images, and constantly needing to change their radius, and/or colors.

 

[Kim]

I do both depending on the situation, if I am pretty sure it is a majority IE visitor my client is going to get, then it has to be images, but if it is open, I like Floris am all for moving it forward and will use CSS.

 

[Miko]

I do both depending on the situation, if I am pretty sure it is a majority IE visitor my client is going to get, then it has to be images, but if it is open, I like Floris am all for moving it forward and will use CSS.

100% agree with you Kim

I would love to use only and always CSS over anything else, but a good 90% of my clients simply don't see it this way...

I have seen they're faces staring at me with disappointment when presented with they're new website and they go and test it in Internet explorer and simply does not look anything like I showed them during the artwork/design phase.

It's a very tough one for me to decide on.... especially when so many other css property are not displaying on the number one (Internet Explorer) used browser around the planet. (I'm a Firefox guy btw...)

no box-shadow, no text-shadow and things do start to look "sh*t" on Internet Explorer...

 

[Floris]

Yeah, but the problem is, those are the same clients who expect you to optimize their code because they have millions of unique views per month, and every bit in traffic seems to count for them. But just for rounded corners for that percentage that runs those browsers that do not support border-radius:; they have no problem having up to 50 additional mini images to fix the many unique corners, and what not. vs .. 5 lines of code. not to mention the extra hours of work it takes and graphic design hours, and all that, on top of the budget of the project; which they don't want to spend too much on.

I've decided that css2.1 should be available for everybody by now, and css3 might be modern-er, but border-radius isn't new to the world. Continueing to support the legacy browsers and legacy operating systems, while the reality is that those users who are not willing or capable to upgrade to say .. Chrome .. they also won't notice or care about the rounded corner. So I've decided to make it a policy for not making rounded corners with images, unless it's part of an image that has to be made (like banners, backgrounds, etc).

The more there's a need for nifty-ness and smexy modern designs, the more people are provoked to get to that by updating their browser to a latest version, or a modern solution.

I rather spend time on another client who understands this, than waste 6+ additional hours on a customer who demands IE6 + rounded corners, AND a modern design. While not willing to pay extra.

 

[Miko]

Problem is that is not only IE6 is 7 and 8 too and that is a BIG slice of the pie.

I wish i could do the same as you Floris but until today I unfortunately always have to fall back on images due to the client expectation to have all of the pretty extra details that he has come to expect from my original art work.

Maybe i should simply avoid any rounded corner in my designs, problem solved!

 

[Floris]

What I have done for my css.php file by the way is to have a define (based on in_array) for legacy and modern browsers, which is set for the user browser, for that browser set. (so it can have up to 8 cached versions, but still better than direct calls each time). Which lets me build output that is made for that browser basically.

An <h1> header could have a css gradient etc for modern browser, no js, no images, etc, and look 100% the same as the screenshot > .gif for legacy defined browsers as background.

But again, it just takes extra work, extra hours, etc .. but at least the css.php will help you write the code. Or at Least only load the legacy browser code, or auto include html5.js, etc.

I've written the 'beginners' article on my coffee cup is empty site, but still as draft ;D

basicallly:

 

[Floris]

Set your <link> to css.php
Set the header of the css.php file to header('Content-type: text/css');
Make a few functions which you can feed properties, elements, alternatives:
function css3($browser, $property, $value) { /*..*/ }
And then you can just populate your $output to css3(MODERN, border-radius, 3px);
And if MODERN is false, use the img instead.

 

[Miko]

I perfectly understand that option but again is more "unpaid" work...
I have to code 1 php file with multiple css rules and on top of that images!
Plus you won't believe how many clients are on ASP Servers with no support for php.

I think I'm not alone with wanting to see the end of all branches of Internet Explorer!

 

[Anthony Parsons]

Whilst I'm not impressed with Microsoft... I must say that border radius is the optimal way and atleast it is supported in IE9, which lets face it, will quickly adopt as the major IE browser within months of its official release. In essence, thinking that way, it will be a minority viewing a square edged layout without JS, images or other hacks.

 

[anotheralias]

I really don't get what the big deal is with having squared-off edges. I think rounded edges are just another fad, like glass buttons and putting a drop-shadow under everything and the new soft-edged, squishy-featured emoticons,* and those damn Flash animations where something swirls out at you. There is nothing wrong with sharp edges in and of themselves. It's not like they're a coffee table you're going to murder your shins on five times a day - they're virtual.

*which actually do nothing to portray an emotion - like, I don't normally smile in this kind of a vacant, loopy way ----> Maybe after a few drinks, but I rarely drink and post.

 

[Floris]

There's nothing wrong with it, but it helps make a flat design look a bit more graphic-y.

 

[Paul B]

I removed all the rounded corners from my forum as I prefer the clean square look.
It also means there is consistency in all browsers.

 

[Elizabeth]

Whilst I'm not impressed with Microsoft... I must say that border radius is the optimal way and atleast it is supported in IE9, which lets face it, will quickly adopt as the major IE browser within months of its official release.

If corporations like GE are still using IE6 while the rest of us are using IE8 even now after almost 18 months, how do you see major corporations upgrading quickly to IE 9 very quickly? I only see them dropping IE6 once support for it is totally gone and that will not be until 2014 when support for Windows XP finally drops as well. Market share of IE6 is still almost 10%, IE7 is almost 14%, and support for that will last well into the 2020's. Corporations don't change easy. 

I personally prefer the rounded look and on my site the market share is tilted more toward the Firefox side but then again, I have a niche site.

Liz 

 

[CBI Web]

I might be seen as the Scrooge of web design, but if you don't have a compliant browser, then get one; I'm not holding back the future for the sake of a few stragglers. There is no reason nor excuse in this day and age to use an older browser; the exception being big businesses who are apparently locked into IE6 for eternity due to the costs of upgrading (a whole 'nother discussion). BUT... for the most part, in order to do business, they don't need visual eye candy such as rounded corners and such, so it shouldn't really matter in that environment.

I could go on to justify and rationalize all my reasoning about this, but it would just become an endless debate. But we all know deep down that really, there is no reason for the average non-business Web surfer to use an outdated browser.

 

[Elizabeth]

I might be seen as the Scrooge of web design, but if you don't have a compliant browser, then get one; I'm not holding back the future for the sake of a few stragglers. There is no reason nor excuse in this day and age to use an older browser; the exception being big businesses who are apparently locked into IE6 for eternity due to the costs of upgrading (a whole 'nother discussion). BUT... for the most part, in order to do business, they don't need visual eye candy such as rounded corners and such, so it shouldn't really matter in that environment.

I could go on to justify and rationalize all my reasoning about this, but it would just become an endless debate. But we all know deep down that really, there is no reason for the average non-business Web surfer to use an outdated browser.

I totally agree for the personal surfer or even the small business owner who has control over what goes on their computer like *I* do. 

 

[Kim]

I really don't get what the big deal is with having squared-off edges. I think rounded edges are just another fad, like glass buttons and putting a drop-shadow under everything and the new soft-edged, squishy-featured emoticons,* and those damn Flash animations where something swirls out at you. There is nothing wrong with sharp edges in and of themselves. It's not like they're a coffee table you're going to murder your shins on five times a day - they're virtual.

*which actually do nothing to portray an emotion - like, I don't normally smile in this kind of a vacant, loopy way ----> Maybe after a few drinks, but I rarely drink and post.

LOL that made me laugh!!!

No sharp edges.... we don't want any accidents after a few wines now do we

I'm definately more of a curves girl myself

 

[Kim]

100% agree with you Kim

I would love to use only and always CSS over anything else, but a good 90% of my clients simply don't see it this way...

I have seen they're faces staring at me with disappointment when presented with they're new website and they go and test it in Internet explorer and simply does not look anything like I showed them during the artwork/design phase.

It's a very tough one for me to decide on.... especially when so many other css property are not displaying on the number one (Internet Explorer) used browser around the planet. (I'm a Firefox guy btw...)

no box-shadow, no text-shadow and things do start to look "sh*t" on Internet Explorer...

View attachment 1913

Yeah it is a tough call, in the Oz business community it's still mainly IE, so thus images... if you do it with CSS and XHTML it is not so bad

 

[Floris]

IE 6,7, and 8, still have MAJOR bugs with xhtml 1.1 and css 2.1

 

[Miko]

I must say that border radius is the optimal way and atleast it is supported in IE9, which lets face it, will quickly adopt as the major IE browser within months of its official release...

Well, that ain't going to happen that quickly I'm afraid according to the w3schools browsers statistics Internet Explorer is one of the most popular internet browsers today covering more than 30%+ of the market.

Out of that 30% a good 8%+ is still using version 6!!

http://www.w3schools.com/browsers/browsers_explorer.asp