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-bottomleft: 12pt;
-moz-border-radius-bottomright: 12pt;
-moz-border-radius-topleft: 12pt;
-moz-border-radius-topright: 12pt;

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-bottomleft: 12pt;
-moz-border-radius-bottomright: 12pt;
-moz-border-radius-topleft: 12pt;
-moz-border-radius-topright: 12pt;
}

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!

Related posts:

1. Align Image In Post WordPress 2.7 More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only...
2. How To Add Colors To Your Theme Sidebar There are times when you would like to add some color to your WordPress Theme’s sidebar to make it more unique, especially if you are using a free Theme which many others are using. There are a few ways to go about adding colors to your sidebars. Read more...
3. One Column Neoclassical Theme Some bloggers prefers a Theme which has only one column for their contents and nothing else. They want no distractions for their readers and honestly, from a blog reader’s point of view, I do enjoy reading more from a blog that has no too much fancy stuffs cluttered all round...
4. How To Make Web Buttons Made myself some web buttons without using any background images. It is made possible by the latest standard in CSS called CSS3. However, till today, Internet Explorer does not support this. These tutorials have been around for quite sometime, so it is nothing new or innovative on my part. I...
5. Left Sidebar For The 2 Column Neoclassical Theme Had a request to make the sidebar float to the left for the 2 Column Neoclassical Theme. The original mod looks like what you are seeing now. These codes will make the sidebar align to the left side. It is added to the custom css file so you do not...