There’s a new version of Cascading Style Sheets (CSS) in the works—CSS3. With this new set of rules for styling your blogs and web pages, you can do things that previously could only be done with images.
One bit of magic that you can do with a CSS style rule now is make rounded corners. You can apply rounded corners to borders, fieldsets, or anything that has a border line around it.
Everything on a web page is in a box. Every paragraph, heading or image you stick on a web page is bounded by a box. Usually you aren’t aware of the box, because you don’t see the borders—the boundaries of the box are not visible. If you put borders on the box, the edges of the box are made visible. Borders frame the element on the page and help separate one sort of content from another. The default borders create square cornered rectangles.
I’ve used rounded corners in several places on this blog. Here’s a specific example. I have a slideshow from Flickr in my sidebar. I put a border around the heading and the slideshow to separate that particular bit of content on my page into a unique element. I made the border have rounded corners.
The Rounded Corner How To
Find the relevant rule in your stylesheet. Every part of your page probably already has some style rules in place. If there’s already a border rule, change it. If it doesn’t have a border rule yet, add it. Here’s what I did in the part of my stylesheet where I styled the slideshow:
#womenintechslides {
border: solid 1px #3CF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
I’ll explain the rule. I added the slideshow to my HTML page using a div with the ID “womenintechslides.” The rule styles that div. First I set the border itself. I made it solid. I made it 1px in width. I made it an aqua color represented by the code #3CF. That much alone would add a border, but the border would have square corners.
The CSS3 property that rounds corners is border-radius. For that property, give a value in pixels to set how curved you want the corner to be. If you go beyond about 18px for the radius, it starts to look bad (pixelated), but try various numbers to find what you like.
CSS3 isn’t set in stone yet. The various browsers are adopting bits of it at different rates. You have to add a couple of redundant border-radius declarations aimed at different browsers, at least for now. The -webkit-border-radius declaration is meant for webkit browsers like Safari and Chrome. The -moz-border-radius one is for mozilla browsers like Firefox. If you put the standards rule—border-radius—last, it will be the one used when all browsers finally get CSS3 implemented using the same rules. By that time, you’ll only need the border-radius rule and the others can be dropped.
That’s the whole magic trick: border-radius. Go round something off.