As I was working on the labs for my live online workshop, I did some experiments with the last release (v 2.01) of the jQuery corner plugin.
This plugin takes the edge off corners and replaces it with various shapes (rounded, beveled, notched, etc.). I have applied two examples – rounded corners and dog ears – to Web Part headers on this page:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx
The shapes are not always as neat as with other methods (that use images or the canvas element), but its ease of use and versatility make this plugin a excellent solution. Note that I said “not always”… the plugin is smart enough to apply the latest css standards if your browser recognizes them. To see this, try out the rounded corners of my above example in different browsers.
For the participants in the September 23rd “tabbed interfaces” online workshop, note that we’ll see how this technique can be applied to the Easy Tabs and the default SharePoint navigation.
If you want to try out this effect on Web Part headers, as in my example, here is the code I used (Only one line of jQuery!):
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-WPHeader").parent().parent().parent().css("background-color","palegreen").corner("dog top");
</script>
(Remember to modify the script to point to your own copy of jQuery and jQuery corner)
Update [9/14/2009]: I have made a slight change to the code, it now works cross-browser: validated in IE7/IE8, Firefox 3.5, Safari 4.0 and Google Chrome (the initial code was IE only).
Path to SharePoint... and Beyond! 
This adds a lot of style in a very simple way- thank you!
Question… could you use rounded corners on your easytabs? Or how coudl I round the corners of each tab?
Can you round the corners of the easy tabs? Or how would you go about doign that?
Kris: sure you can. For example it is built in v3 of the Easy Tabs which was given to the workshop participants.
The corner plugin is easy to use, just apply it to the tab row.
I looked thru the tabs script… I couldn’t see an area named ‘tab row’… I see the function to create the tabs. Then i see how it uses the ms- files from the css which is amazing and clever! I suppose I could hard code the css file to round the corners? But that would be a little much and would style the whole site the same? What would be the best route here? I did notice that the color features carried over as well which was a plus to keep the entire them in line…
btw – thank you for your blogs, your input on msdn… I need to get in one of your workshops sooner or later… trying to wait till after xmas…
Hi,
I am trying to use this code in my masterpage and nothing is happened.
I put it in the head section.
The include is working, but no style changes are done.
Please suggest.
p.s. I am running rtl site, but the class names are the same.
The script needs to run after the Web Parts are displayed on the page. Either place the script at the bottom of the page or use jQuery’s document.ready method.