Internet Explorer users don’t care about rounded corners. Bold statement? Perhaps. But recently I’ve taken this approach to a few designs as I’m tired of having to use some sort of rounded corner hack to support IE. It’s a lot easier to just use the CSS 3 declaration.
If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.
Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:
CSS 3 rounded corners
div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}CSS 3 text shadow
div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}CSS 3 box shadow
img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}But how do you deal with clients?
This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.
If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.
Conclusion
The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.
What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.
October 19th, 2009
Hugh Collier says:
I agree. Rounded corners are usually just there to add a little flair to a design.
As long as the site looks ok and is usable in IE then there’s no problem. I just wish that the W3C CSS validator would throw up warnings instead of errors when it encounters CSS3.
October 19th, 2009
John Girvin says:
Looks good, and it fits in with the “so long as it works” philosophy I adopt when dealing with IE!
See: http://www.johngirvin.com/blog/archives/ie6-%E2%80%93-so-long-as-it-works.html
October 19th, 2009
Mark McCorkell says:
On my website I use the CSS3 rounded corners for image borders and form fields. I really with that IE would start supporting CSS3 the way Firefox and Safari do.
I’m not sure whether the typical IE user cares about these subtle interface refinements… but maybe I’m wrong?! It bugs me though when IE users can’t see things exactly the way I’d like them to.
October 19th, 2009
Brian Burns says:
Yes, indeed Mr Munroe. Good post. I come from the same school of thinking. Found a number of things that Mr Clarke talked about at FOWD Belfast very interesting… Although controversial, the benefits of designing within the browser are there to be seen. I’m adopting a similar approach to a few things I’m working on at the moment.
So long as a design degrades gracefully in regressive browsers, no kittens will die.
October 19th, 2009
Paddy says:
Excellent point. As long as it’s still a great user experience in Internet Explorer, if that’s what you choose to use, then it’s fine. It makes you think about people who have no clue about the browser wars or computers in general and just use IE6 because that’s what their old pc came with many years ago. How is their view of the web? Everything must be all over the place, overlapping here and cut off there. I’d say surfing the web is not a great experience at all for them.
Although, this is valid if you’re using Internet Explorer by choice. What about design savvy people who have to use IE on their work computers? Those poor poor people.
October 19th, 2009
Paddy says:
I just re-read my comment.
‘I’d say surfing the web is not a great experience at all for them’
Sounds like this is a major *News Flash* for me :s My intended point was more on the fact that people who have always used IE6 must just hate surfing the web as it’s always a crazy experience. It would be interesting to experience a day in IE6 for once, but I couldn’t bring myself to do it.
October 19th, 2009
Mark McCorkell says:
@Paddy – It would probably be an Alice In Wonderland type experience!
October 19th, 2009
Liam J Moore says:
Degradation is best.
October 19th, 2009
BHMediaMarty says:
I agree with the “if it works in IE that’s enough” comments. It always pains me to have a site that functions well in all browsers and then I launch IE and it’s all over the place for some stupid reason. IE is now a “functionality” afterthought, regardless of what percentage of visitors I have who use it, if they are forcing me, especially to cater for IE6 they don’t deserve the bells and whistles. Besides, most of them think yahoo or the google searchbar is their browser and haven’t actually got a clue what browser they’re using.
October 19th, 2009
John Browning says:
I agree as long as the clients’ web site analytics show that a majority of their users have updated browsers, those with IE 6 probably won’t realize what they are missing.
October 19th, 2009
Mark McCorkell says:
Apparently on the new Windows users will be given the option to actually choose their browser upon setup, as opposed to IE always being the default. I can’t remember where I read this to reference it but I seen it somewhere recently. But it would be interesting to see how impartial that options page is…
October 19th, 2009
A.D.K. says:
I thing that this new feature in CSS 3 is just awesome, I’m sill not used it but I am willing to, I thing it will be really useful, I must say that the peoples who still use the old IE, they probably just don’t care so much, but I am happy because I have find my own way for doing the rounded corners in both Firefox and explorer. But in future I am willing to use CSS 3 and I will do exactly like you, yep
good work
October 19th, 2009
Robin Cannon says:
Very much agree. I think it’s all too easy for designers to try too hard catering to the lowest common denominator in their designs. If you can develop a design that degrades gracefully then it’s a much better option, because you’re providing clients with the best possible use of the more advanced browsers while also ensuring that users with older software aren’t locked out.
October 19th, 2009
Lee says:
Thanks for the feedback, everyone seems to agree so far. I’m waiting for an IE advocate to come on and say “But I want to see rounded corners”
Anyone any examples of how they’re using CSS 3?
@Paddy: Agreed, hard to have a good user experience in IE6
October 19th, 2009
Steve D says:
I kinda agree and I kinda don’t Lee. The rounded corner thing was the first thing I tried in CSS3, and I used it on a couple of nav items on my personal portfolio site.
I fully understand the reasoning behind sticking the CSS3 value in, it’s easier and to a certain extent it degrades OK. But for example on my last site design, I gave the whole site and buttons a rounded corner look. This was part of the design decision as I wanted to give the company a friendly look. In this case I used images for my buttons and the overall site, which was more difficult than just rounding the corners, but i believe it was the right decision.
I believe you should have a reason for using rounded corners. This shouldn’t exclude IE users if the only reason is that it is simpler to do without the hassle.
October 19th, 2009
BHMediaMarty says:
One of the worst things about all the additional improvements that come with new technologies, advances in HTML, CSS etc. is that when you know you have to develop a site for IE6, you tend to strip away and ignore all the good stuff, sticking with the basic core elements of original CSS while trying to find other ways around what has been simplified and improved on in newer versions, just so your customer who still insists on typing their domain name into google’s search box instead of the address bar at the top, and who is still convinced that the answer to “what browser do you use” is either Windows XP, Yahoo or Google, will see the site on their ancient system as it appeared on your 3 month old system running the latest software and browsers.
Best one I had, a customer wanted a site with all the bells and whistles, heavy flash animation, sounds, the works, but it had to work on his computer, it had to load in fast, and he was on, believe it or not … dial up.
O.o
-
October 19th, 2009
Lee says:
@Steve: Good point – it does depend on the overall branding and to what extent you need/want to use rounded corners. The examples I’ve used above are subtle extras. There are still a number of rounded graphics that all browsers will see on those sites.
@BHMediaMarty: Never good when someone wants “all the bells and whistles” lol
October 19th, 2009
Anna says:
I totally agree. Most users that still use IE for everyday surfing won’t notice it since they have never seen it in the first place. They can’t miss what they never had.
October 19th, 2009
Gavin Cooper says:
I agree that on your own projects you can justify not having rounded corners on your design for those *still* sticking with IE6. However I would never consider this for a client, in my opinion if you can, with only a little bit of extra effort give IE6 users rounded corners aswell then why not? they still command 20%+ market share.
October 20th, 2009
Ahmed says:
couldn`t agree more , as long as the content is accessible and the site is functional for everyone.
I`m heavily using Round corners , Box shadow & RGBa on my personal site , webkit and Firefox users gets this extra stuff but in IE it`s still functional , and not too bad too.
October 20th, 2009
Ben says:
You should try http://www.curvycorners.net, you can use CSS3’s round corners and it will still appear the same on IE because of this jquery script.
October 20th, 2009
Chris says:
Thanks Lee for the post, CSS3 has been something I have been avoiding due to incompatibility. But perhaps in the name sake of design, if something is made well enough, truly IE users would not notice the difference, or as I quote, care?
Most certainly will be working more with it. It is a big difference from years back, where the mainstream was to use .js to make round cornered divs instead of images! We have came a long way.
October 20th, 2009
Chris Mahon says:
I agree and for a long time have been doing this on my own projects but everyone should have a quick read of the following article which gives a great insight into how rounded things are perceived to be easier on the eye and simpler to use.
http://www.uiandus.com/2009/07/27/theories/realizations-of-rounded-rectangles/
October 20th, 2009
Marco Jardim says:
Just a small note to all the other designers here. Don’t forget to add “border-radius: 10px;” besides the proprietary definitions, remember that one day the standard will be finalized and those definitions might disappear.
As much as we look back upon history with our Websites and IE6/7 we must also look forward and provide progressive-enhancements that will make our sites age like a fine wine.
October 20th, 2009
Matt Hill says:
I’d love to ditch image based rounded corners. But it’s simply not practical when it’s a big part of the design.
We all know that rounded corners significantly improve the “friendliness” of a design. This can be crucial to creating the right brand and the right feeling. If you only do the rounded corners in CSS3, the design will feel completely different in IE.
I’ve recently worked on two very complex front-end builds that were for rounded-corner heavy PhotoShop designs. To save time and complexity, I recommended doing them in CSS3, but the clients were insistent on rounded corners. I’d say that added at least a day to the front end coding, especially for IE — and yes, I charged for it.
October 20th, 2009
Jonny Campbell says:
@Gavin I think it depends on who the client is and what their potential customer base is. IE6 users may make up 20% of the overall market share but you may find that a client’s user base has potentially much less IE6 users i.e. a web site about web design or apps for Mac are less likely to have IE6 visitors.
October 20th, 2009
Alwyn Kotze says:
I’m all for limiting functionality for browsers that will not support functionality.
Dropping support for ie because it does not support css3 elements errs to the ridiculous. I do not design for Firefox or Safari users, but for internet users.
Adding rounded corners with scripts like dd roundies is so simple that I do not find any water in your argument.
Yes I’m a regular IE user, because only in using all the browsers, and seeing how browsers behave with different designs can I ensure that my users get the best experience from my designs.
Yes I would object if I knew that the web page I looked at is limited because the designer litteraly could not get himself to spend another 10 minutes on the design to implement dd roundies. Time that would obviously be saved in designing and fitting rounded corners in Photoshop because dd roundies does it all.
Regards
October 20th, 2009
Hugh Collier says:
“I agree that on your own projects you can justify not having rounded corners on your design for those *still* sticking with IE6. However I would never consider this for a client, in my opinion if you can, with only a little bit of extra effort give IE6 users rounded corners aswell then why not? they still command 20%+ market share.”
The point is that if we continue to support legacy software like IE6 things will never move on. If there is no incentive for people to upgrade their browser (like nicer looking websites) then they just wont and we’ll be stuck compensating and making compromises for IE6 for ever more.
October 20th, 2009
Lee says:
@Alwyn @Matt: Very valid points. I think if you present it to your client in that way i.e. “It will take another x hours of development to add in rounded corners for all browsers, and therefore another £x will be added to the bill” and they agree then of course, make them happy.
But if you present a design that mainly consists of square corners, which looks good and they’re pleased with, but then it takes you an extra 10 seconds to add in rounded corners for Firefox/Safari/Chrome, then go for it
@Marco: Well remembered sir
October 20th, 2009
Lee says:
@Chris Mahon: Nice article http://www.uiandus.com/2009/07/27/theories/realizations-of-rounded-rectangles/
October 20th, 2009
Mark McCorkell says:
Is there anyone here still a student? I’d be curious to know if the universities are still actively teaching how to develop with IE6 support.
October 20th, 2009
Dave Kinsella says:
I agree with your sentiments but I don’t think it’s the case that “IE users don’t care about rounded corners”. For the majority of users (not concerned with cross-browser compatibility), they will use one browser exclusively. If they are using IE and see a site that has square corners – they will happily accept that the site looks that way. The fact that users of other browsers see rounded corners will most likely not cross their minds.
As long as the site looks good in all browsers, the only people who are likely to notice the differences are the designer and the client. As pointed out by others here (and oft-repeated by the likes of Andy Clarke and Paul Boag) it doesn’t matter that they are different and it’s a point that clients need to be educated about, preferably before the design work begins so as not to look like you’re making excuses for bad work.
My approach (where possible) is that clean markup which looks good and works well in all browsers, is far better than over-complicated markup with layers of CSS and javascript hacks in an attempt to make the site identical for everyone.
October 20th, 2009
Andrew Murdoch says:
I suppose it depends on your target audience but on our website 75% of users are on IE and 13% are still on IE6, so that is more than on Chrome and Safari and nearly as many users as on Firefox (16%)
If the vast majority of the users aren’t going to see the rounded corners why do them at all? Personally I have gone down the *make them work on all browsers route* and I wouldn’t class it as a hack, just an alternative technique which is actually more flexible than the CSS technique.
October 20th, 2009
Sam Soffes says:
Agreed. A lot of people are starting to do this. CSS3 saves so much time. It’s generally worth IE not looking as good and everything else looking awesome.
October 20th, 2009
c. says:
@Alwyn
“I’m all for limiting functionality for browsers that will not support functionality.”
What does a lack of rounded corners have to do with functionality? The page still functions, it just lacks a minor style detail. That’s worth getting upset over?
Once upon a time, I used to bend over backwards for NS 4.7x. It supported CSS a lot better than people gave it credit for. The difference between NS 4.7x and IE 6 is that minor things can cause the page to be unusable, or worse, crash the browser.
I care enough about IE to get it usable and at least come close to honoring the spirit of the design. Some things simply are impossible (such as reformatting tables, which I’m a big fan of for certain things). I’m not going to change my design because one archaic browser can’t cope. They’ll just have to live with the best their browser can do. And really, they probably don’t even know what they’re missing.
October 20th, 2009
Abhilash AM says:
I agree with dave. As far as the website is working, user will not care for a round corner or square.In most of the cases, it is the designer or the client,who notice such changes.
As far as the website is working, i don’t mind if the box has got a round or square corner
October 21st, 2009
Gary says:
My opinion is show the modern browsers the more polished site and if IE6 looks basic then tuff, move on from 10 years ago and upgrade your browser, it’s free!
October 21st, 2009
Veera says:
I’d the same problem of rounded corners when I designed my blog theme. I was using mozilla’s round corder properties, but it worked only in FF. IE was still showing rectangular boxes. I had to use the ugly rectangular boxes in IE.
But if CSS3 is supported by IE, then the rounded corners problem in IE would be solved easily.
October 21st, 2009
Dan Jones says:
I use CSS3 rounded corners, but it’s not because I think IE users don’t care about them, it’s because I don’t care about IE users.
And quite frankly, I think that’s probably really how you feel as well, but you’re trying to justify your lack of effort in deploying a real cross-browser solution.
Honestly, I’m just not going to work hard enough to get my site to look just the way I want it in a broken web browser because most people are too stupid to download a decent one.
I’m not saying I don’t care at ALL how my sites look in IE. I make sure they work, and are usable and are half-decent looking, but if they’re not as pretty, that’s not my fault; it’s Microsoft’s.
October 22nd, 2009
Gilbert says:
I have to agree with you on this one Lee. I’ve been following the same ethics on most of the sites I have worked on lately. Progressive Enhancement over Graceful Degradation.
October 22nd, 2009
Innovacious says:
Ive started using rounded corners and text shadows (although i use it as a glow more than a shadow). It still works for IE users, it just looks a bit more plain. If they REALLY want to stick with IE then that is their problem.
The plainness (i doubt that is even a word) matches their browser better anyway.
October 23rd, 2009
Robin Cannon says:
The attitude that’s come up in many of these posts that “users are too stupid to upgrade” irritates me.
Graceful degradation of a website so that it remains functional (if not as pretty) in IE6 is important, particularly when working for corporate clients. Many businesses don’t upgrade for IE6 because they have functionality and developed software that is incompatible with later versions. While that may have been a strategic mistake on their part back in the day, it means that they and their employees are often stuck using IE6.
You have to tailor web design to your audience. I can’t think of another industry where service providers think it’s legitimate to say “sorry, you’re too dumb to have up to date technology, we won’t help you.”
I’m lucky in that recent projects I’ve worked on have been for sites that have <5% visitors using IE6, so I can safely remove extensive support for that browser. Were I to get a client who still received 10% of visitors using IE6 then I’d have to address that though, and ensure that lots of their visitors weren’t locked out.
The arrogance that many designers show towards users who either aren’t widely knowledgeable about upgrade options, or who don’t have the option to upgrade because of their office policy, often astounds me.
October 23rd, 2009
Matt Hill says:
@Robin Cannon: I’m equally astounded. Unfortunately, it seems to be the ‘de rigeur’ attitude of the new generation of web designers. It’s not cool to talk about supporting all users, but it *is* cool to do shiny whizz bang stuff in the latest technology.
Users ultimately pay our wages, so it’s in our interest to build sites that work for as many people as possible.
October 23rd, 2009
Robin Cannon says:
@Matt Hill yeah, very much so. The thing is, there’s nothing to stop people doing both. Really that’s what this blog post is about, using the latest technology to give users with the most up to date browsers the best experience possible, while ensuring that sites look reasonable attractive and functional on older technology. The two definitely aren’t exclusive.
October 23rd, 2009
Web Design Singapore says:
well its quite true but it appears that round corners are the in thing now.
October 24th, 2009
Lee says:
@Robin @Matt: I agree. When it comes to the olde IE6 rant I say just deal with the fact that there are users who can’t (or won’t) upgrade and make sure the site is accessible for them, and looks reasonable. Case closed
See here http://www.leemunroe.com/ie6-design-help/
October 24th, 2009
Mark McCorkell says:
@Lee: What’s your thoughts on using transparent PNG’s for corners etc? Would you still cater for IE6 that way? Or would you say it’s acceptable enough to use transparent PNG’s even though the IE6 users can’t view them the same?
October 24th, 2009
Chris Mahon says:
@MarkMcCorkell In that case I just serve up a PNG8 file for IE6 users. Sure the edges are a bit rough, but it’s better than nothing.
October 24th, 2009
Lee says:
@Mark: I tend to take Chris’s approach too – an IE6 specific stylesheet with gifs (or png8) as background images
October 30th, 2009
Matt says:
Yeah, I agree: rounded corners are something extra, that’s why I use compatibility design degradation. I’m starting with the basics for IE6 & 7, some more details for IE8 and full spec for modern browsers like FF3, Safari and Chrome. This is the only way I see it.
And yes, I think that if you’re using IE you definitely don’t care about that stuff as much as you don’t care about your own comfort when browsing the web.
November 25th, 2009
fefa says:
ah! the famous reounded corners i work with two engineers on informatic and it’s always the same with one of them “fefa, why i can’t see the rounded corners??” and i answered becouse you don’t have a descent navegator, just jocking, but sometimes believeme there are IE user that bitch a lot about their we looks the same in all borwser even if is a really really old version
greating
fefa
November 25th, 2009
Robin says:
Yeah you are right. Those who use internet explorer probably doesn’t care about anything that is modern on the web.
I’ll do as you say from now. The bright side of this is that after a while maybe people will notice that every webpage looks better when not using internet explorer.
November 27th, 2009
Jason Stockton says:
I agree, I’ve been doing CSS corners for months now in all my site designs without a single complaint. The designs still usually look good in IE they just look better in other browsers.
December 19th, 2009
devu says:
All so true… and sad, frustrating etc. When you have no power to explain all this cross browser issues to your client or boss.
That’s why Flash is an perfect solution even if ‘professionals’ are laughing on you, Why do you using Flash if this whole project is perfect for pure html/css?. And there is anything Flashy here. This is why.
Prepare rounded box taking one line of code, 10sec, and looks exactly I expect on all browsers and platforms.
December 30th, 2009
Joe Stevens says:
I totally agree. I’ve been taking the same approach recently. The key to getting clients to accept it is to skip the PSD mockups and also to get them using Safari/Chrome/Firefox during development. By the time they start looking at the site in IE they won’t really care about the subtle refinements that are missing, they will just care that it works. I don’t know if that will work for everyone, but I have been lucky so far.
January 14th, 2010
Nic says:
I use firefox and i could not give a rat’s a$$ if it has rounded corners or not.. please get over yourself. thanks.
February 19th, 2010
stella says:
@nic – I guess you are not a web designer then? What are you doing here? Or are you just a designer having a *really* shitty day?
Anyway, I HATE IE!!!!!!
There, I said it.