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.
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…
4 thoughts on “Rounded Corners on Web Part Zones”
Good post.. thank you!
SharePoint rounded corner web parts with JQuery: http://www.signaturesterling.com/blog/post/Rounded-Corner-Web-Parts.aspx
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!
Same approach but I used jQuery to inject all the needed div elements