How to Use CSS Magic to Create Rounded Corners on Your Blog
By Virginia DeBolt on June 15, 2010
BlogHer Original Post
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'm sure you've seen BlogHer Publishing Network ads on many blogs. Most of them are in a square or rectangular area. Some are defined by a border line. At KnowIT you see no borders, but you can tell the box is rectangular because of the background color. On Banannie you see the ad with no borders at all. At Background Fairy, you see the borders with square corners.
I've changed those borders on my blog so that the corners are rounded. Here's how the top of a BlogHer Publishing Network ad looks on my blog.
Here's another example. I have a slideshow from Flickr on my blog. 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:
border: solid 1px #3CF;
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.
More Like This
Recent Posts by Virginia DeBolt
Most Popular on BlogHer
Hearing your baby laugh is the most amazing sound. Discover why baby laughter is so important, your baby’s own Baby Laugh Index™, and much more at www.babylaughindex.com.BlogHer and Bright Starts™ asked 10 bloggers to share what kind of laugh their kids have and to try out one of these fun toys: the Jungle Fun Ball Climber™, the Hide 'n Spin Monkey™, or the 3-in-1 Step 'n Ride Lion™ . Check out their posts and learn how you could win one too! Read more
Most Popular on Technology
Recent Comments on Technology
By Annie Smith