I can’t tell you the number of times I’ve visited old stylesheets and done google searches for border radius. It could have been a simple matter of storing it as a TextExpander snippet, but it just didn’t feel right.
Jacob Bijani, Tumblr’s Creative Director, is the same. “I always have to stop and think when setting a border radius in CSS, so I built a tool for it.” And so, Border-Radius.com is ours for the using. You can play around with the borders which instantly reflect changes (less guesswork), and I don’t need to mention it’s drop dead gorgeous.
{ 2 trackbacks }
{ 6 comments… read them below or add one }
Ah! That’s nice. Its this at this time that I like mixins in SASS.
very nice, thanks for sharing!
The tool is missing out on exploiting the shorthand available to -moz’s unorthodox interpretation of the proposed spec. If you’ve got radii (going from starting top left and moving clockwise) that have a mirrored-repeating pattern (like in margins or padding) you can shorthand them rather than writing a separate rule for every corner.
For example, instead of:
-moz-border-radius: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
One could simply write:
-moz-border-radius: 10px 5px;
Again:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 5px;
… would become:
-moz-border-radius-topleft: 10px 5px 7px;
The same cannot be done with WebKit or the CSS spec as it stands today. It’s a bit too complicated to explain that in a comment.
I don’t think it’s “missing out” on anything. The point of the tool is because we can’t remember even the names of the CSS keys to use — what are the chances we can remember which unnamed corner comes first? I would never remember (or guess) that “10px 5px” means “TL and BR are 10px, TR and BL are 5px”. I will continue to gladly pay 40 or 50 bytes extra per visitor (cached, in a CSS file) to be able to understand my CSS next week.
What a brilliant idea, the border-radius must still be one of my top google searches, even though i’ve used it a hundred times already lol.
Seems to be a must have. Thanks for this