How To Make Rounded Corners For Your WordPress Theme

A very popular method to make rounded corners for our WordPress Themes is a workaround by using images. It will be quite lengthy to discuss this method here as it will involve discussing about Photoshop and all. Maybe when I find the time, I’ll do a screencast on how to do a rounded corner image for your Theme. Today, we shall use some css codes to turn our Themes content area layout and sidebar title backgrounds which are rectangular by default into something more elegant looking with rounded corners.

Below I have grabbed a free Theme from the WordPress Theme Directory as an example. It has a square rectangle with white background for the content area and a nice looking blue rectangle for the sidebar title’s background. We shall turn both these areas into rounded rectangles.

Click to enlarge

The Content Area
First, you have to identify which part of the css file is responsible for declaring the values of the content area. Normally it will be denoted by these declarations, #content or #left-colum or #left-content, or so on and so forth. Each designer has their own preferences so it is up you to make a smart guess. Most of the time, it will be trial and error. It does not matter if you insert the codes in the wrong place in the first few attempts, as you can always go back and delete them and place them elsewhere until you get it right.

In my case, I was able to guess pick the codes in my first attempt, but then, I have modded hundreds of Themes so I have developed some sort of gut feeling for these kind of things. For this particular Theme, the codes that makes how the content area looks are declared under – #left column inner. Within the curly brackets are all the values which looks like this.

#left-column-inner {
float: left;
width: 570px !important /* 530px due to border and padding */;
background: #fff;
color: #333;
padding: 10px;
border: 10px solid #000;

{

Now comes the fun part. To make rounded corners for the content area, insert these codes just befor the closing curly brackets.

-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

Make sure everything is INSIDE those curly barckets. Like this:

#left-column-inner {
float: left;
width: 570px !important /* 530px due to border and padding */;
background: #fff;
color: #333;
padding: 10px;
border: 10px solid #000;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

}

Update your css file, go to your blog and hot refresh, you should see a rounded content area like below.

The Sidebar Title Background.

Again, identify the codes for the Sidebar Title background. Normally it will have these declarations – #Sidebar H2 or something similar. Again, after you have found the codes, insert the same codes just before the closing curly brackets. In this case, I have reduced to radius size to 5pt from the original 12pt. After adding the codes your Sidebar Title Background should look like this;

Enjoy your new look!