I wanted to add rounded corners to the out-of-the-box web part header in a SharePoint 2010 site. Looking around in Google’s initial results, I found a couple references to Heather Solomon’s article about adding rounded corners to a web part header in a 2007 site, but I didn’t especially love that the rounded corner didn’t go all the way to the right edge:
At this point, I have to admit that I didn’t dive much further into Google results, but decided to have a go at it on my own. If I had spent a little bit of extra time, I might have found Rich Whitworth’s article about using jQuery to add classes to the table cells of the web part header which would then give you an easy way to hook in the CSS. Or I might have seen Kyle Schaeffer’s article on using CSS and images to add rounded corners, which is pretty close to what I ended up doing. … But I didn’t, so here’s what I ended up doing on my own.
I’m going to go through a couple different examples:
- A gradient rounded header bar using images and CSS
- A rounded header bar using CSS3
These will all be based on the same general principle, but perhaps the slight differences and examples will be helpful.
The basic idea
Here is the HTML for the table that holds the web part header. As you can see, the row has a class of .ms-WPHeader. Then, there are up to five table cells involved:
- td.ms-wpTdSpace – the first spacer cell on the left
- td.ms-WPHeaderTd – the cell that holds the title
- td.ms-WPHeaderTdMenu – the cell with the dropdown arrow; only shows if you have editing privileges
- td.ms-WPHeaderTdSelection – the cell with the select checkbox; only shows if you have editing privileges and if it’s available
- td.ms-wpTdSpace – the last spacer cell on the right
In order to attach a background image or color, I’ll apply styles to all the table cells by using .ms-WPHeader td. To add on the rounded corners, I’ll apply styles to td.ms-wpTdSpace – the spacer cells on the left and right – and use the :first-child pseudo-class to target the left spacer cell and modify it as much as I need to. Finally, I’ll work with .ms-WPHeaderTdMenu, which has some border styles applied by the default core CSS and a hover background effect, so that it doesn’t clash with my new header bar styles.
Ready? Let’s go!
A gradient rounded header bar using images and CSS
Let’s start with a gradient rounded header bar using images and CSS, which will compatible across most browsers, including IE7 and 8. Here are the two images I’ll be using – “bg-bar.png” for the repeated background, and “bg-barcorners.png” for the left and right corners.
Now, let’s add the CSS. I’ll start with applying the repeated background image to all the table cells:
.ms-WPHeader td { background: url('../images/bg-bar.png') repeat-x; border-bottom: none !important; }
Here’s what it looks like:
That little gap on the right has to do with some of the border settings on the .ms-WPHeaderTdMenu cell — we’ll deal with that later.
For now, let’s apply the rounded corners to the left and right table cells. I’ll apply the background image to any table cell with .ms-wpTdSpace and position it to show the top right, then use the :first-child pseudoclass to move the background image to the top left so that the corner shows up properly.
.ms-WPHeader td.ms-wpTdSpace { background: url('../images/bg-barcorners.png') top right; } .ms-WPHeader td:first-child.ms-wpTdSpace { background-position: top left; }
Wasn’t that easy?
The rest of this is just fine-tuning. I’m going to change the color of the title text to be white (both the normal title text and any linked title text) and remove the border from .ms-WPHeaderTdMenu to get rid of that gap. I’ll also add some styling to the .ms-WPHeaderTdMenu hover state so that the hover effect goes more with my color scheme.
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; } .ms-WPHeaderTdMenu { border: none !important; } .s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }
Here’s how it looks now:
Here’s the complete CSS code for those of you who like to just copy and paste:
.ms-WPHeader td { background: url('../images/bg-bar.png') repeat-x; border-bottom: none !important; } .ms-WPHeader td.ms-wpTdSpace { background: url('../images/bg-barcorners.png') top right; } .ms-WPHeader td:first-child.ms-wpTdSpace { background-position: top left; } .ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; } .ms-WPHeaderTdMenu { border: none !important; } .s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }
A rounded header bar using CSS3
For an even quicker solution that doesn’t involve using images, you can use CSS3 to add rounded corners to the header bar. This solution won’t work in IE7 or IE8 but should work in IE9, Firefox, Safari, and Chrome.
If you look at the code below, I used a background color in place of a background image, then rounded the corners using CSS3 properties.
.ms-WPHeader td { background: #7bb42d; border-bottom: none !important; } .ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; } .ms-WPHeaderTdMenu { border: none !important; } .s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }
Here’s what it looks like:
You can even use CSS3 to add a background gradient to duplicate the look from my first example.
.ms-WPHeader td { background: #7bb42d; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,180,45)), color-stop(1, rgb(176,210,128))); background-image: -moz-linear-gradient( center bottom, rgb(124,180,45) 0%, rgb(176,210,128) 100%); border-bottom: none !important; } .ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; } .ms-WPHeaderTdMenu { border: none !important; } .s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }
Just for an extra variation and a slightly different look, you can add rounded corners to the bottom edges of the web part header by using more border-radius properties. Notice that I also added .ms-WPBorder { border: none; } to remove the border from any web parts that might have the border showing.
.ms-WPHeader td { background: #7bb42d; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,180,45)), color-stop(1, rgb(176,210,128))); background-image: -moz-linear-gradient( center bottom, rgb(124,180,45) 0%, rgb(176,210,128) 100%); border-bottom: none !important; } .ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } .ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; } .ms-WPHeaderTdMenu { border: none !important; } .s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; } .ms-WPBorder { border: none; }
Hope you find this helpful!
References and additional resources
- Branding SharePoint – Part 3: Changing the look and feel of SharePoint components – Intro and Web Parts by Heather Solomon – Adding some rounded corners to the web part header in SharePoint 2007
- Rounded Web Part Title Corners in SharePoint 2010 by Becky Bertram – similar to Heather’s article but for SharePoint 2010
- Rounded Corners in Sharepoint Webpart Title Bar Using JQuery by Rich Whitworth
- Web Part Style in SharePoint 2010 by Kyle Schaeffer – pretty much what I ended up doing! Wish I had seen it before hacking away myself, but I think the title threw me off and I didn’t click on it until after the fact.
- How to add rounded corners to your SharePoint web parts by Wouter Laureys – Uses jQuery to add extra divs around the entire web part that you can then style.
- SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable by Brandon Anderson – Also uses jQuery to achieve rounded corners on both the top and bottom edges of the web part, but integrates the rounded corners with the header bar instead of adding divs around the web part.
This is a fantastic article. So many times I see this get massive quotes of time and expense to re-invent the same implementation. Thanks for sharing 🙂
Thanks for commenting, Wes! If you choose to quote massive amounts of time and expense for this effect, I won’t tell… 😉
Nice! Much appreciated!
Hi there, thanks so much for sharing! i am new to sharepoint, just started working on it. Could you please tell me which css file to modify? and its path? thanks once again!
Hi..Corrie..Thanks a lot for this bit. Just perfect.
Regards
Srini
Nice article and thanks for that. I was just wondering if it can be used for SharePoint 2007 as well?
Thanks,
Hamish
So I’ve looked in the Found in:
LAYOUTS\1033\STYLES\mysitelayout.css
and
LAYOUTS\1033\STYLES\COREV4.CSS
folders and I am unclear where to paste the code you’ve implemented.
Also the two .png files need to go in what location in sharepoint to be referenced?
Could you help clarify this as I cannot find any other articles concerning this issue.
Thanks
this does not seem to work for ie8, the corners are squared. If I use firefox it looks perfect. Is there a different format to write the commands for IE?
Nice article and thanks for that.
Thanks for this. I was pulling my hair out trying to get the td.ms-wpTdSpace to work.
Much appreciated 🙂
I’ve tried this code verbatim,including the graphics, and the corners do not show up. I am using IE8. Is there an issue with IE* that it does not show the corners? Is there a workaround for it?
Have you checked in other browsers? Most likely there’s a problem with the image reference – check the path of the image relative to your stylesheet and pages.
Works like a charm!
Thanks Man!
where the photos should be saved ? am saving it under style library and its not working !!
I keep my images in a subfolder under Style Library. My CSS file is in that same folder. You’ll just want to check your references carefully!
Thank you for this article. Of all the ones I read, it seems the easiest to implement. I tried this verbatim, including the graphics, and it worked just fine. The only question I have is where or how did you make the icons? I would like to have a different color. Do you have the URL for this rounded corner?
I used Photoshop to make my web graphics.
I have tried this by inputting the code into the html editor in 2010 when I hit ok it looks awesome however when I save and get out of edit mode it vanishes.
Very nice article.But I am looking for bottom borders css ,which also needs rounded corners .Please help me out…thanks