Rounded Corners in WordPress / Thesis

Rounded corners are extra sexy these days.  Here’s how you can get it on your wordpress page without using transparent image icons.

It’s really simple, except that it’s a function of css3 that only works in firefox/safari, but not IE, so it’s not perfect.

Here’s all i did in my custom.css

.custom #page {
/* rounded corners */
-moz-border-radius: 20px; -webkit-border-radius: 20px;

the radius number determins how round of a corner it is, you can use 5px for a very small curve, or a larger number for something more curvy.

For example if you want to change the nav menu (like seen above) you can try this (btw this is for the new thesis 1.6 navigation menu)

.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius: 10px ;
-webkit-border-radius: 10px ;
border-radius: 10px ;
}

Easy.

Tagged as: corners, navigation, rounded, style, thesis

11 comments