Can everyone feel how square the IE world is about to become? We have recently began the effort of killing the rounded corner graphics and even sillier solutions such as Nifty Cube in favor of the progressive CSS rounded corner tags.
CSS
-webkit-border-radius -moz-border-radius
It's a tough decision to start dramatically forking the experience between IE and “the rest of the world.” But, before you get overly excited, note the border-radius has it's gotchas!
-
FF 3.0 doesn't support individual cornersCorrected - thanks BrainlagYep, I'd really recommend squaring the diminishing world of FF3.0 as well.By all means, ROUND EM IN FF3.0! This can be done by targeting FF3.0 and above with @media queries.This will require a constraint since @media partially worked in FF3.0. So, try@media (min-width: 1px;) { }corrected: @media screen { #myDiv { -moz-border-radius: 5px; } } -
Background images spill out of rounded boxes in FF3.0
I believe FF3.5 properly masks background images finally
-
Rounded corners in FF2.0 aren't anti-aliased
This is probably not much of a problem given FF2.0's 3% market share.
These quirks are no cause for concern. In fact, I think you should leave FF3.0 and pre Safari 4.0 out of the rounding world by the fact that older browser FF and Safari users disappear faster than “a truckload of dead rats in a tampon factory!” - gratuitous, meaningless quote from Top Secret.
What do you guys think? Any major CSS Rounded Corner converts?
-tatemanBrowser Support
- Firefox
- Safari
- Chrome
Comments
leave a commentI agree with you. If rounded corners are a must on anyone’s design, something is wrong with the design itself. Also, the end user will NEVER compare any website btw IE and “good browsers”
, unless he/she is a dev or designer.
I love it! As long as we can make the corners glow, I’m happy!
Either I don’t understand what you mean or you are completely wrong
@BrainLag – You’re absolutely correct. My bad. I think I was still mad at Mozilla for not supporting box-shadow and border-image in FF3.
Setting the individual corners has been available since FF2.
People may disagree, but CSS rounded corners in FF2 are so bad, that I’d rather see square corners! Can anyone think of a non-hackitous way of targeting all but FF2? I guess the secret way is via @media. Despite what quirksmode reports, @media works in FF3 as long as it doesn’t have a composite expression.
So, target your rounded corners like this:
#myContent { background-color: #fc0; }
@media screen {
#myContent { -moz-border-radius: 5px; }
}
Voila! Not that many FF2.0 users are going to complain.
Sorry for the mixup!
Cheers.
Tateman
You can as well try the FlexiPanels CSS – a Dreamweaver extension that makes rounded corner CSS boxes without coding. It works on IE as well.