Careful with that corner
20090813812
I recently used the CSS border-radius property for the first time on a client project. Made me smile. Though, not without some trouble.
Seems Webkit was the first to support border-radius with decent rendering. I remember previous Firefoxes had pretty horrendous looking curves. Yet, the latest Firefox seems to have leap frogged. Not only does it support a more robust version of the spec (total ellipticals!) and full shorthand notation, it also does its best to render your mistakes.
Giving up and going square
When messing around with getting the proper radius, at some points I ended up slightly over without realizing it. Testing in Firefox showed it worked just fine. A while later I noticed my rounded corners were square in Safari. Turns out when the radius is greater than the available padding on an inline element, rather than render as much of the rounded corner as possible, Safari gives up and makes it square.
This text will have square corners in Safari but rounded in Firefox. Bumping the radius down to fit within the element (or pushing the padding up) brings rounded corners back in the latest Safari.
Enjoy your cheap squarcles.
Comments
Skateboards and bikes are better at nights. 0 comments.
I do love squarcles. Does this work at all in IE or does it just asplode the browser?
Nope asplode so much as just doesn’t do it. IE renders some sharp square corners instead.
A note on squarcles: Safari doesn’t understand the shorthand notation for border radius so to get that one squared corner amongst a bunch of roundeds you need to write out the rule for every corner.