CSS3 Rounded Borders was a success! Well, for Firefox users anyway! Luckily, I checked my stats and find that 65% of my visitors are Firefox users… mostly v2.0, but a few v1.5 users are still out there. Time to upgrade Firefox folks!
The rounded corners technique using CSS3 method is very easy compared to what I went though to create the graphics for each corner yesterday. Well, creating the graphics wasn’t so bad as getting all the pieces in place to position them properly–and then I still wasn’t satisfied. So, I’m glad I remember this technique existed. After reviewing the sample at CSS3.Info using border-radius for Mozilla & Webkit, I came up with the following:
[image no longer available.]
Note the rounded corners on the post background, the sidebar, and even the tabs. I thought I was going to have to reduce the radius for the tabs, but actually they look good with the same 25px radius the other corners are using. I’ve also got a shot of the middle of the page to show you how I’m separating the posts with the background and a little separation:
[image no longer available.]
OK, OK! You want to know how to do it!
First the rounded corners. Pretty much straight from the page at CSS3.Info:
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: #003712;
border: 1px solid #CCCCCC;
Works very nicely. The border is just barely visible gray to help blend the edge a little.
The tabs are similar, however I used the specific CSS3 properties for just the bottom-left & bottom-right corners.
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomright: 25px;
background-color: #003712;
border: 0 1px 1px solid #CCCCCC;
Note, the border being applied only to the left, right & bottom.
I’m still tweaking the size & font on the tabs, as it doesn’t feel quite right. I also took a quick look at it in IE7 to see what it would do with the rounded corners… not pretty! Besides not handling the border-radius property, it also didn’t seem to be handling some of the top margins or something. The first post was shifted up & overlapping the tabs. I’ll have to look into that… though I would rather ignore it! It might be a simple validation issue–I have not been able to validate the page yet since it’s on an internal server. The CSS has been validated by TopStyle, and it doesn’t like the Mozilla- & Webkit-specific properties, but that should not be too much of an issue. They should be just ignored. I hope!