How to Use CSS Magic to Create Rounded Corners on Your Blog

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.

The top of a blogher ad

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.

A slideshow with a border

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.

--

Virginia DeBolt
BlogHer Contributing Editor|Web Teacher|First 50 Words

Recent Posts by Virginia DeBolt

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.