In this quick tip I show you how to create divs with rounded corners in FF and Safari. This does not work in IE…but I don’t really care! Progressive enhancement FTW!!!
*Please pardon the un-styled mess why I am rethinking and re-designing my blog!*
In this quick tip I show you how to create divs with rounded corners in FF and Safari. This does not work in IE…but I don’t really care! Progressive enhancement FTW!!!
Check out the live example here.
Leave a comment and let me know what you think! And don’t forget to subscribe via iTunes.
[13] Comments
Posted in design, Screencasts, Tutorials, Web Design
[...] Quick Tip #34 Rounding The Corners [...]
[...] Weekend from Tim Scullin 06. Creative 404 Error Pages Around for Inspiration from Instant Shift 07. Quick Tip #34 for Rounding the Corners from Niki Brown 08. 5 Things Sesame Street Can Teach You About Breakthrough Blogging from [...]
[...] Rounded Corners In FireFox And Safari [...]
Subscribe by rss, email, or in iTunes!
Ryan Bickett says:
Thanks for this post. This is just the tutorial I was looking for. I am planning to use this in a project I am currently working on.
June 15th, 2009 at 5:47 am
Charles Martin says:
This didn’t work and is not visable on IE7 which i just checked the the live preview on. I think that IE is the leading browser, there has been many attempts for rounded corners.
June 15th, 2009 at 5:49 am
Niki says:
@charles I stated in the tutorial that this does not work in any version of IE… It’s time to upgrade to a better browser buddy!
Users with modern browswers will see nice progressive enhancements with these new css3 properties. I wouldnt use it on anything essential, but its just a nice enhancement!
Anyways thanks for the comment!
June 15th, 2009 at 5:54 am
Benjamin Reid says:
Nice quick tip. I’ve been reluctant to use these because of the non IE support. But I suppose there’s no harm in having FF and Safari having round corner then IE defaulting to square corners – as WordPress does?
What about background images or gradients? Or do we have to wait for CSS3 for that too?
June 15th, 2009 at 9:36 am
Mariusz says:
Using border-radius is pretty cool, but the problem is that you can’t use it in not-so-outdated browsers like IE and it doesn’t really degrade gracefully in most uses – I still find good ol’ sliding doors to work way better. And it’s cross-browser.
June 17th, 2009 at 9:42 am
loswl says:
That is pretty cool, Love It!!
)
June 17th, 2009 at 9:43 am
Cece says:
Very cool. Thx.
June 17th, 2009 at 9:44 am
Peter says:
Not at all a bad demonstration; thanks! I’ve yet to implement this technique into my designing, but it’s certainly handy. CSS3 excites me.
June 17th, 2009 at 9:53 am
Joram says:
Nice tip for css3
I’m using Safari 4 (latest version), and even though the 10px radius worked like a charm, the 200px radius didn’t go so well unfortunately. Not sure how it is in Firefox though, but I think css3 isn’t completely implemented/working well yet.
Nontheless a very promising future for websites and the sanity of dev’s ^^
June 17th, 2009 at 10:13 am
Lethalogica says:
It’s not as simple as “just upgrade to a better browser” when the global stats show over 50% of browsing is done on some iteration of internet explorer. It is cool though and I’m looking forward to when CSS3 is fully supported.
June 17th, 2009 at 12:29 pm