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


SEMRUSH is the only SEO tool you will ever need with features like: Keyword Analytics, Site Audit, Traffic Analytics, Position Tracking, Organic Research, Backlink tracking.

SEMrush 14 day free trial