Widget box-rounded corners

[Kim Hannan]

I would love to change up the theme a bit by having the widget with rounded corners. I was thinking (aesthetically) of having top left squared with other three rounded (maybe 10 px).

I know there is code out there for this, but want to be sure that I drop it in in the most effective spot.

Thanks for your ever reliable advise.

[Bill Robbins]

You can do that. Here is a CSS snippet for your Custom CSS box that can make that happen for you:

.widget {
	-webkit-border-radius: 0px 10px 10px 10px;
	border-radius: 0px 10px 10px 10px;
}

The numbers go in order from the top left corner to the right, right bottom and left bottom if you want to change any.

Have fun,
Bill

[Kim Hannan]

Bill: This is perfect….but then I see I should have asked one other question. The Widget headers lay over the widget box…so I would need to change the top right corner on the header to be rounded. I am guessing you have a nifty coding answer in your pocket?

Thanks!

[Bill Robbins]

Good point. This will round the top right corner for you:

h2.widget-title,
h3.widget-title {
	-webkit-border-radius: 0px 10px 0px 0px;
	border-radius: 0px 10px 0px 0px;
}

[Author]

Posts