Create stretching rounded corners background for web part titles in Sharepoint using CSS2

You most probably know that with CSS3 it became easy to crate nice-looking rectangle areas (e.g. for buttons) with rounded corners and gradient. However in Sharepoint development we are often limited to enterprise requirements which makes impossible using of CSS3 (hopefully during last several years I didn’t have IE6 compatibility requirements, but IE7 is still often mentioned). In this post I will show how to create stretching rounded corners background for web part titles in Sharepoint 2010. In the end of article I will also show how to use it for Sharepoint 2007.

Without CSS3 we have to use images with rounded corners. For this example I used online http://css-tricks.com/examples/ButtonMaker for generating of the nice-looking button and then made images from screenshot. We will need 2 images of the same height:

left:

and right:

Note that left image should be wider (for this example I trimmed it to fit into blog layout) – it will be used when user stretches browser window horizontally.

After that put the following selectors into your alternate css file:

   1: tr.ms-WPHeader > td { height: 46px; }

   2: tr.ms-WPHeader td.ms-WPHeaderTd { background: url(left.png) no-repeat left top; }

   3: tr.ms-WPHeader td.ms-WPHeaderTd + td { background: url(right.png) no-repeat right top; }

   4: .ms-WPHeader td.ms-WPHeaderTd span { color: white; }

(you may need to fix urls to the images – according to the location of css file it may be e.g. Style library). After you will save changes your web parts will look like this:

And the same in edit mode:

In Sharepoint 2007 css will be slightly different, but idea remains the same. There is no “ms-WPHeaderTd” class so we need to use first-child pseudo element:

   1: tr.ms-WPHeader > td { height: 46px; 

   2: tr.ms-WPHeader td:first-child { background: url(left.png) no-repeat left top; }

   3: tr.ms-WPHeader td:first-child + td { background: url(right.png) no-repeat right top; }

   4: tr.ms-WPHeader span { color: white; }

Using this technique you will be able to decorate your web parts titles with CSS3-style rounded corners background.