CSS Widget Styling

There are two properties you need to add in order for rounded corners to show up, the border property and the border-radius property. For example, for your text widget, you can add this CSS rule:

.textwidget {
   border: 2px solid #b0b0b0;
   border-radius: 12px;
}

The border-radius value determines how much of a curve you have. The higher the value, the more of a curve. The three values for border are the thickness of the border, the style (solid, dotted, or dashed), and the color.

You can add any other container for which you want rounded corners. For example, you can also add the .hentry selector for your page/post content:

.textwidget, .hentry {
   border: 2px solid #b0b0b0;
   border-radius: 12px;
}

First, thank you for your response! Second, I have a question for you. On the .text widget .hentry – can I call it something like .postcontainer and place content in individual div’s and target them seperately? for instance, what if I want each post in a seperate container?

.textwidget {
border: 2px solid #b0b0b0;
border-radius: 12px;
}

this works for adding a border around the widgets, however it excludes the widgets title.

If I add the same css to the widget title, it has them in seperate containers.

How can a make it one cohesive container with the title with a gradient background?

On the .text widget .hentry – can I call it something like .postcontainer and place content in individual div’s and target them seperately? for instance, what if I want each post in a seperate container?

Yes, of course you can target individual DIVs. Just give them a unique ID and add that ID to the selector.

Let me give you an example. If you go to your blog page (i.e., News), and view the source (or examine the site using Chrome Developer Tools), you’ll see that each post is contained in a DIV which has a unique ID that looks like this: post-number. The post on “Garbage Disposal Not Working?” has an ID of 372 (each post and page has a unique ID number assigned to it when you create the post or page). So if you just wanted to put a border around that post entry, and not all of them, take out the .hentry class selector (which is a class that is assigned to all posts) and substitute the ID selector #post-372 (note that ID selectors begin with a pound (#) sign while class selectors begin with a period (.).

this works for adding a border around the widgets, however it excludes the widgets title.

If I add the same css to the widget title, it has them in seperate containers.

How can a make it one cohesive container with the title with a gradient background?

I’m not sure what you mean by the “widgets title.” I don’t see a title at the top of the sidebar. However, if you want the border to enclose the entire sidebar, you can change the .textwidget selector to #primary, which is the sidebar ID. Is that what you mean when you say you want “one cohesive container?”

Ah, OK, I was confused. I was looking at the sidebar with the “Bid Requests” and “Save With Tankless Water Heaters” areas, not your picture. Each widget has the class widget-container attached to it. Instead of using .textwidget (or #primary), use .widget-container. That will put a border around each widget, including its title.