CSS Help for Styling the WP Sidebar Widget

I’ve made all the sidebar widget of my wordpress blog to be contained in rounded corner rectangle box using the following CSS code.

border: 1px solid #D3D8E0;
border-radius: 9px;

However, now I realized not all the widgets need a rounded border so what is the CSS code should I use to override the rounded corner CSS code?

Would appreciate any help advice.

Thank you.

Hi affiliateTT, welcome to SitePoint.

The thing to do is give a class to the container, and then apply the styles to that class only. E.g.

<div class="widget">
  ...widget stuff here...

In your CSS file:

.widget {
  border: 1px solid #D3D8E0;
  border-radius: 9px;

Thanks Ralph. I thought about your code before.

However, since 90% of my widgets need to be inside rounded corner box, I thought it is easier to make all of them to be in this way first and only apply exceptional case to those which are not.

I just couldn’t figure out what CSS code should I use to override the global setting.

Any idea? Or you have better way to do it.

Many thanks again.

O, in that case, just add a special class to those that don’t have rounded corners:

{border-radius: 0;}

Just make sure the selector for these widgets has greater weight than for the rounded widgets. E.g.

<div id="sidebar">
  <div class="square">
#sidebar div {border-radius: 9px;}
#sidebar div.square {border-radius: 0;}

Thanks Ralph, it works.

Couldn’t believe it was that easy! :blush:

No worries! Glad to be of help. :slight_smile: