Category: WebDesign

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.

How do you add borders to data tables with CSS? Depending on how you want the borders to display, it can normally be accomplished with three steps.

I constructed a small table and will show it to you as I move through the three steps. I’ll use a medium width, solid style border in the color #00f (blue) for all the border rules. With a width assigned to the entire table, and a border rule added to the table, here’s the beginning CSS.

table {
width: 40em;
border: medium solid #00F;
}

Here’s how that looks (in Firefox).

As you can see, applying a border rule to the table selector adds a border to the table only. Step two is to apply the border property to the td and th selectors as well. Here’s the new CSS.

table {
width: 40em;
border: medium solid #00F;
}
th, td {
border: medium solid #00F;
}

This is what you see now.

You may choose to accept this appearance. But you see that you have some spacing between the table cells between the borders of each data cell. If you don’t like that appearance, the third step will correct it. This step involves the border-collapse property. It is applied to the table selector, like this:

table {
width: 40em;
border: medium solid #00F;
border-collapse:collapse;
}
th, td {
border: medium solid #00F;
}

This rule eliminates the space between cells, but is implemented in a slightly different way in some browsers. Look at the effect in Firefox and Safari.

To my eye, there is a thicker border on the top and left in Firefox. (Before you decide that’s unacceptable and write rules to correct it, it would be good to see how other major browsers render the border.)

You can change the border style or width or color, but these three simple steps take care of getting a data table presented with borders.