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…

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

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):

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).

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:

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