Rounded Corners on Web Part Zones

Curiously, one of my more popular blog posts is about putting rounded corners on things in SharePoint. It does seem that this is a pretty popular question. As a side note, Heather Solomon has a post about doing this for web part titles, though I followed Madalina’s instructions.

Anyway, one design requirement that come up repeatedly is rounded borders on Web Parts. I swear, it comes up with every design – and it isn’t possible (although I have an idea – more on that tomorrow). What you can do, though, is have a rounded border about the entire web part zone…

2 Web Parts in two Zones

Of course, the problem with this is that if you put two web parts in one zone you get something like the following:

2 Web Parts in one Zone

Actually, that can sometimes work quite well, but it’s something else to consider when you (or your users) are laying out their web parts. Still, it’s pretty easy – here are the image files used for the border (I put them into a folder in LAYOUTS):

Files used

I then put a whole bunch of DIV tags into my page for the borders. I don’t like having all of them, but it’s a fairly standard way of doing this (browsers – please support CSS for corner radius soon).

DIV tags for corners

Yuck! Lots of DIVs, but combined with these CSS Styles …


… it puts our border around our web part zone. Obviously, for a real system you’d use a nice looking border – mine is for prototype only.

One issue that remains, though, is what happens if there are no web parts in the web part zone? Well, as it stands you’d have a nice empty box which would shrink to its minimum size, as there are not contents. This isn’t ideal – if it’s empty, we’d rather not see it at all. SharePoint seems to deal with this for square borders using the MSO_Layouts_MakeInvisibleIfEmpty() Javascript function. JavaScript? Pah! Quaint and old school – I used a bit of jQuery:


What this code does is get the innermost DIV tag of every bordered area. If that DIV tag doesn’t have any children, we find the first parent DIV tag at the ‘top’ of my set of nested DIVs, and hide it! And that works nicely:

No Leftovers

Next up, I’ll take a look at borders on web parts themselves

Rounded Corners on Web Part Zones

4 thoughts on “Rounded Corners on Web Part Zones

  1. It is always nice to see that at least someone is reading what you wrote. Thank you for reading my Rounded Corners post for MOSS!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.