Attempt #1: CSS

In my first attempt at round corners in web part headers in SharePoint 2010, I took an all CSS approach. Which didn’t take me too far.

The code:

ms-WPHeaderTd {
    background: transparent url('/_layouts/images/myfolder/wp-header-left.gif') scroll no-repeat left top !important;
}

.ms-WPHeaderTdMenu {
    background: transparent url('/_layouts/images/myfolder/wp-header-right.gif') scroll no-repeat right top !important;
    border: 0;
}

The result:

SharePoint 2010 has a new feature that enables you to select a web part. Very nice, the problem is that it breaks my header by adding more table cells to the web part header. You can see in the screenshot the extra checkbox in the header and the problem with the alignments (see yellow lines). And to make it worse some web parts are selectable, some aren't.

Attempt #2: CSS + jQuery

Using jQuery I wrapped the web part header table with a div and added a class wp-head-round to both.

The code:

function RoundWebPartHeader() {
     $(".ms-WPHeader").each(function () {
        $(this).parents("table:first").addClass("wp-head-round").wrap("<div class=\"wp-head-round\">");
    }); 
} 

The result:

Let's see the resulting HTML first:

Now the CSS to finish it up:

div.wp-head-round {
     background: transparent url('/_layouts/images/myfolder/wp-header-left.gif') scroll no-repeat left top !important;
     height: 25px;
     margin-right: 5px;
     position: relative;
}

table.wp-head-round {
     background: transparent url('/_layouts/images/myfolder/wp-header-right.gif') scroll no-repeat right top !important;
     border: 0;
     position: absolute;
     right: -5px;
     top: 0;
}

I'm using transparent corners for the background. That's why I need to play around with the positioning of the elements.

And finally, perfection:

Here's the images I've used for this example. So you know how you need to create them:

wp-header-left.gif (this one has a big width so that it can handle the resizing of webparts)

wp-header-right.gif