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.
About the author
Lee Munroe is a freelance web designer from Belfast Northern Ireland. Like this article? Feel free to follow Lee on Twitter.
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.
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
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.
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.
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.
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.
@Paddy - It would probably be an Alice In Wonderland type experience!
Degradation is best.
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.
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.
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…
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
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.
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
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.
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
-
@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
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.
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.
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.
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.
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.
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/
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.
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.
@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.
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
“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.
@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
@Chris Mahon: Nice article http://www.uiandus.com/2009/07/27/theories/realizations-of-rounded-rectangles/
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.
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.
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.
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.
@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.
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
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!
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.
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.
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.
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.
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.
@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.
@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.
well its quite true but it appears that round corners are the in thing now.
@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/
@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?
@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.
@Mark: I tend to take Chris’s approach too - an IE6 specific stylesheet with gifs (or png8) as background images
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.
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
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.
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.
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.
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.
I use firefox and i could not give a rat’s a$$ if it has rounded corners or not.. please get over yourself. thanks.