Rounded corners are seen in Web designs all over the Internet. This is a simple effect to achieve, but you might wonder how to apply it to a WordPress blog. Since blogs use “themes” – templates that control the look of WordPress – for their designs, you must edit the stylesheet included in your active theme. Before doing that, however, you must also get the class name assigned to all widgets in the theme. Adding the “border-radius” property to a style rule that targets the widgets class will give you those rounded corners.

Load your blog in a browser, such as Internet Explorer, and right-click anywhere inside the browser window. Select “view source” to load the source code for the blog. Read through the code until you see anything with an ID or class name that mentions widgets: <li id="search" class="widget-container widget_search"> The above example comes from one of the two “official” WordPress themes, “Twenty Ten.”

Take note of the class name used for every widget. In “Twenty Ten,” for example, each widget uses “widget-container.” You would not use “widget_search,” because that only applies to the “Search” widget.

Log in to your WordPress blog and click “Appearance” on the sidebar to expand the Appearance sub-menu. Go to “Editor” under “Appearance” to load the “Edit Themes” screen.

Scroll down to the bottom of the code in the code editing box. Write a style rule that targets the class name your widgets all use: .widget-container { }

Add the “border-radius” property within the curly braces of your style rule: .widget-container { border-radius: 10px; } The border radius is a pixel value or a percent value representing the amount of rounding you want applied to the corners of an element. The element in this case is the widget.

Warnings

Unless you add a border or a background color to your widgets, the rounded corners won't show.

Internet Explorer (IE) versions 6 through 9 don't support the “border-radius” property. Either leave the corners sharp in those browsers or add CSS3 PIE – a script that will add support for CSS level 3 properties to older IE versions – to the code for your blog's theme.

About the Author

Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.