Good Practices for rounded corners

Discussion in 'HTML & Website Design' started by nooberton, Dec 18, 2012.

  1. #1
    Hello everyone, I'm working on a wordpress theme (Really just a CMS since I just ported my html/css into it) and I've got a question about rounded corners. Now I see a lot of websites and especially WP using them and I also want to use them, making my boxes look like this: http://illbequirky.com/

    Apparently it's easy to do with CSS3 using the border-radius attribute but the problem is it doesn't work in IE (Surprised?) which requires a work around:
    http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

    So I'm wondering what you would do if your design hinged on these rounded corners. I don't know how so many wordpress themes get away with them (Or maybe they don't). A last resort would be to use an image as the background, which might not be the best practice.

    Thanks.
     
    nooberton, Dec 18, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    1) IE9 supports them, so don't just say "IE"

    2) If you are so obsessed with your 'design' that not having rounded corners in IE8/lower is a problem, you might be in the wrong business.

    3) most of the 'fixes' -- polyfills, shim's, shiv's, whatever they feel like calling them this week -- in my experience waste as much bandwidth and cause more problems than just sucking it down and using images if you REALLY need to support IE8/lower.

    If you REALLY need to have IE8/lower support for *oh noes* rounded corners, suck it up and use a image... in most cases with a bit of planning you can do it with just one image while still retaining dynamic sizing... the technique I call "Eight corners under one roof."
    http://www.cutcodedown.com/tutorials/eightCorners/page1.html

    Though I stopped using it about a year ago because I've gone CSS3 for layouts -- and if stupid presentational extras like rounded corners and shadows don't show up in IE8/lower, OH WELL. The site should still work and be usable.

    That's actually one of the entire reasons we have HTML and CSS -- you build a site with progressive enhancement so that it gracefully degrades. As fancy bits of presentation are unavailable in older browsers, the site should appear simpler but still at least work.

    People who are unwilling to join us in this century get a less attractive version of your site -- BIG DEAL! So long as it still works for them, who gives a flying purple fish?

    But again, people visit websites for the content, not the goofy graphics you hang around it!
     
    deathshadow, Dec 20, 2012 IP