Ads By Google

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

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.

rounded-contents

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;

rounded-sidebar-title

Enjoy your new look!

Share This Post
Ads By Google
 

Free Updates

Subscribe to receive Free WordPress Theme Tips, Reviews and Discount Codes

Related WordPress Theme Tips

Align Image In Post WordPress 2.7More 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...

Add Left Sidebar To 2 Column WordPress ThemeFor a programming noob, how easy is it to add a left sidebar to a 2 column WordPress Theme that has a right sidebar? Not easy. The simple reason is,...

Add An Author Bio Box In Frugal ThemeThere are some who say that the Frugal Theme although easy to mod and create unique layouts without any need for codes, there will be some cool things that cannot...

How To Add Colors To Your Theme SidebarThere 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...

How To Increase The Size Of Your WordPress ThemeSize, in this instance is the size area of your blog layout and not size in terms of traffic, contents or whatever that you deemed as the bigger the better....

Those who found this page were searching for:

  1. rounded tables wordpress
  2. rounded content area thesis
  3. using curvy corners in wordpress
  4. wordpress round corners html
  5. wordpress round corner
  6. wordpress + rounded corners
  7. sidebar wordpress rounded corners css
  8. wordpress 2010 roundcorners
  9. round corners on wordpress the,e
  10. wordpress how get rounded corners themes

6 Responses to “How To Make Rounded Corners For Your WordPress Theme”

Read below or add a comment...

  1. kris says:

    Hey,
    It works only in Mozilla Firefox, doesnt it?

    • Costa says:

      Ahhhh.. Yes, Kris.

      Thanks for the reminder. I get so engrossed and used to Firefox that I always forget IE exist. :-)

      Sorry…

  2. Jayce says:

    Yeah… Going to try that out. ;)

  3. Jess says:

    Thanks! Been wondering how to do this and it works great!

  4. Tony says:

    While I also like to forget about IE, it’s kind of necessary to code for it. People still use it. If we like it or not.

  5. Derek says:

    Damn dude, your the man! I was reading articles and articles about creating pictures on photoshop and then adding uploading them uisng the ftp bla bla bla…..with this code I just added it to my CSS and it worked like a charm!! Full props!