Here is a quick tip I just discovered while messing around with my custom.css style sheet. This tip shows you the CSS code that turns this:
into this:
Firefox vs. Safari vs. Chrome
Since rounded corners are relatively new, the browser support isn’t consistent. In my opinion, Firefox does the best job of rendering rounded corners, Safari and Google Chrome do a decent job, and in typical fashion…Internet Explorer doesn’t support rounded corners at all. Here’s a comparison:
Browser-specific CSS Properties
Firefox
/* All 4 corners */ -moz-border-radius /* Each individual corner */ -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomleft -moz-border-radius-bottomright
Safari & Chrome
/* All 4 corners */ -webkit-border-radius /* Each individual corner */ -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius
Internet Explorer Special Instructions
CSS Code for Rounded Thesis Menu Tabs
Here is the CSS code that creates the rounded corners seen in the first examples:
/* Remove the border from the far left. */
ul.menu{border-left:0;}
/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-home a{
border-left:1px solid #CCC;
-moz-border-radius-topleft:.5em;
-webkit-border-top-left-radius:.5em;}
/* This creates the rounded borders. */
ul.menu li.tab a{
-moz-border-radius-topleft:.5em;
-webkit-border-top-left-radius:.5em;
-moz-border-radius-topright:.5em;
-webkit-border-top-right-radius:.5em;}
If you opted to NOT show your home page link in the navigation menu, then the CSS class .tab-home will need to be changed to .tab-1 in the code example above.
{ 6 comments… read them below or add one }
Home…Abort…that’s funny stuff. Seriously though, this is a really useful tutorial. Thesis is a killer theme that is ideal for anyone who doesn’t want to crack open the WP core and monkey around. Having a way to add rounded corners through CSS is a great addition. Thanks.
This is the best tutorial and guidance I have ever found on rounded corners. Easy and the CSS worked flawlessly. Thank you!
Great tutorial. Thanks!
Thanks for the tutorial. I used the “CSS Code for Rounded Thesis Menu Tabs” code above and it worked fine on the Home Tab (first tab from the left) but when I click the other tabs it shows as having the left border missing. Can you suggest code that will put the left border in for the other tabs? I tried adding the following code but it did not solve the problem.
ul.menu li.tab-2 a{
border-left:1px solid #EBEBEB;
-moz-border-radius-topleft:.5em;
-webkit-border-top-left-radius:.5em;}
Thanks!
Hi Darren, thanks for the excellent tutorial, I think I will try this on my own Thesis blog. One question though, I noticed that you have a 40em bottom margin on the footer and wonder if you did this on purpose? If that is the case, does it help for people actually scrolling completely to the bottom of your site?
Hi Johan,
Great observation! I’m surprised you noticed that. :)
Yes, it is on purpose, and yes, it is for better scrolling. For users with large LCD monitors or laptops, it is difficult to read anything at the bottom of their screen, due to the restrictive viewing angle. I try to add a margin big enough to bring the bottom of the content to the middle of a 22″ monitor, at the bottom of the scrollbar.