Looks like my tutorial on how to customize WordPress widgets with CSS was quite popular. One of my readers asked me if there’s a way to add round corners to WordPress widgets. The answer is: of course! :)

There are many ways to implement rounded corners using CSS and images. In this tutorial, I won’t be using the best or the most flexible one. I’ll be using a technique that allows people to add rounded corners to widgets without the use of Photoshop or any other graphics program. While this method won’t produce spectacular results, I think it’s the easiest way to add rounded corners, even if you are a WordPress newbie.

Create the round corner images

Like I said, we won’t need Photoshop or similar. Instead, we will use this web based rounded corner generator to generate the top and bottom images for your rounded corner box.

Scroll to the bottom of the screen, where it says Single RoundedCornr Image. Use the following settings to generate the top image:

  • Height: 10
  • Width: Put your sidebar width here. If you can’t find that in your theme CSS, try to approximate. You can recreate the image until you have a match.
  • Bottom Corners: Square
  • Corner Radius: 10
  • Solid Color: To help you with this, you can use the ColorSchemer Online Tool. Copy / paste the HEX value when you found the right color.

Leave the rest as it is and hit Generate RoundedCornr. If you like what you see, download the image, rename it to rounded_top.gif and place it in your theme’s images folder.

Hit your browser’s Back button and repeat the same process, but using Top Corners: Square. Save the file as rounded_bottom.gif.

Rounded Corners Widget

Adding the CSS

Go to Presentation > Theme Editor and paste the following in your styles.css:

.widget {
	background: #FF9900 url(images/rounded_bottom.gif) no-repeat bottom left;
	padding-bottom: 10px;
}

.widgettitle {
	background: url(images/rounded_top.gif) no-repeat top left;
	padding: 10px 10px 0 10px;
}

.widget ul {
	margin: 0 10px;
	list-style: none;
}

Use your chosen background color instead of #CCCCCC.

Last comments

  • In case you chose a different corner radius, you must also change this in CSS. So for a corner radius of 5, you should change 10px to 5px everywhere.
  • This works out of the box with bulleted list type of widgets, like Latest Posts, Latest Comments, etc. For other widgets (like a text widget) you might need to add some more CSS, for proper alignment.
  • For the top image you can even use a gradient. Just be careful to choose two similar colors, otherwise it will look to flashy.

That’s it! Now go and practice. Feel free to comment if you run into trouble and I’ll do my best to help.