Thursday, February 4, 2010

Wordpress - rounded tab corners

Firefox and Chrome recently included the ability to create rounded corners in CSS or style sheets.  After some playing around I was finally able to get it to actually work.  Google Chrome also has support for rounded corners under the name 'webkit'.  Note that the paramaters have to be different for Firefox and for Chrome.  The 4px parameter sets the size in pixels of the corners.

Here is the CSS to make it all work;

#nav li {
float: left;
list-style:none;
color:#3f3f3f;
border-top: solid white;
border-left: solid white;
}

#nav a, #nav a:visited {
display: block;
text-decoration: none;
background:#f0f0f0;
padding:5px 12px;
color:#3f3f3f;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-left: 1px solid gray;
-moz-border-radius-topright:4px;
-moz-border-radius-topleft:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-top-left-radius:4px;
}

Here is what the rounded corners look like in tabs.

No comments: