Rounded Corner Menu Tabs With Border

I picked the Amazing Grace WordPress theme for many reasons, but one of them was that most color changes were done in the stylesheet.

Then one day on my wanderings around the Net I came across the code to create rounded corner menu tabs that show up in browsers like Firefox. In IE the tabs are square.

rounded tabs example

rounded tabs example

Giving the tabs a different colored border was then easy. All I had to do was add a border color and pixel size.

#catmenu li a {
        background:#CFC1A7;
        border: 1px solid #8D614A;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

Comments are closed.