Rounded borders are one of those things that are so common, it seems slightly ridiculous that you should ever have to fire up Photoshop and slice up little images. Luckily, Safari and Firefox already support rounded borders.
That’s why when CSS3 is finalized, it will fully support rounded borders. Until then, Firefox and Safari helpfully recognize specific CSS rules. Let’s say you want all paragraphs on your site to have a border radius of 10px (larger radii mean a more rounded box). You would simply create the following rule in your stylesheet:
p {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Whenever Firefox or Safari users see your style rules, they will render your boxes as desired. The -moz properties apply to Firefox, and -webkit applies to Safari and the iPhone.
The great thing is that if you’re indecisive and decide from day to day that a 5px border radius is better than a 7px border radius or vice versa, you can change the style immediately with a few keystrokes. Plus, you don’t have to do all sorts of breakage-prone tricks if you need to change widths or anything like that.
If you ever feel like having a circular box, all you have to do is make your box a square by giving it a fixed width and an equal height. Then set your border radius to half of the box’s dimension. Actually, anything larger than half will also work, but instead of creating a cool flower shape, the browser just scales the radius back to half the box width. Here’s what I mean:
p {
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
background: #222;
color: #ddd;
width: 300px;
text-align: center;
}
One thing you’ll notice is that the text inside the box isn’t actually aware of the curved boundaries; it still obeys the box model. I think CSS3 will introduce a feature for wrapping text around curved boundaries, but I’m not sure if there’s a workaround with current CSS. Any ideas?