Add Rounded Corners to Thesis’ Menu

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:

thesis menu default

into this:

thesis menu rounded

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:

thesis menu rounded comparison

Browser-specific CSS Properties


/* All 4 corners */

/* Each individual corner */

Safari & Chrome

/* All 4 corners */

/* Each individual corner */

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. */{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. */ a{
	border-left:1px solid #CCC;

/* This creates the rounded borders. */ a{

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.

Recent Content

link to Repixel Review

Repixel Review

In the increasingly competitive online world, every marketer or website owner is actively looking for ways to monetize their website. Regardless of the marketing strategy or method of revenue generation used, there’s a common starting point- targeting the right audience to acquire high-quality traffic. The great news is that getting high-value traffic to your website […]