SharePoint Rounded Corner Web Parts

Use JQuery and a content editor web part to quickly achieve rounded corner backgrounds for web parts within SharePoint 2007.

QuickStart Guide
  1. Generate images for web part corners - I used
  2. Copy/paste the following JavaScript content into a text editor - RoundedWebPart
  3. Replace the following corner image URL's with paths to your newly generated corner images (ensure your users have 'read' privileges to the images' location)
    • /Shared%20Pictures/Top_Left_Corner.png
    • /Shared%20Pictures/Top_Right_Corner.png
    • /Shared%20Pictures/Bottom_Left_Corner.png
    • /Shared%20Pictures/Bottom_Right_Corner.png
  4. Replace the '#f3de96' color with the value of your images' color
  5. Add a Content Editor Web Part to the SharePoint page
  6. Modify the Web Part and paste your modified JavaScript text content into the Source Code Editor
Check the content editor's layout 'Hidden' property to prevent it from displaying with a rounded corner background.

Posted on 12/8/2009 5:02:00 PM by sterlingt

Permalink | Comments (7) | Post RSSRSS comment feed |

Categories: MOSS 2007 | SharePoint 2007 | WSS 3.0


Related posts


February 4. 2010 04:55

Hi, the link to the JavaScript file in 'SharePoint Rounded Corner Web Parts' seems to be broken. I'd very much like a copy of the code to use on a site I maintain.



David Phillips gb

April 26. 2010 01:39

fantastic job. This is just what I was looking for. The only issue I have is that it uses the rounded corner on all of the web parts on my page where I only wanted the one CEWP to have the rounded corner. Is there a way to do this?

Chris gb

October 22. 2010 04:05

"RoundedWebPart" link to the file "RoundedWebPart.doc" is broken. Can you please fix it. I would like to use the code on my sharepoint site.


October 22. 2010 06:18


Thanks for the feedback, I have fixed the link.



January 3. 2011 16:01

Hi Tracy, I tried the Javascript code and have javascript error on the page. Is this the working version?


February 14. 2011 02:35

Same thing other article.. Wink


April 14. 2011 01:28

how do you back out this code if the end result is not what you expected?

Steve Sherwood