SharePoint 2010 – WebPart Header Rounded Corners

Lets use some fancy CSS3 properties to add rounded corners to the Webpart header bar. This solution won’t work in IE7 or IE8 but should work in IE9, Firefox, Safari, and Chrome.

Have a look:

.ms-WPHeader td { 
	background: #89CE2E; 
	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; 
}
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { 
	background: #89CE2E; 
}

Written by Paul

With 10 years of software development and support experience in the information technology industry, Paul has a proven track record in delivering swift, accurate results on multiple client engagements. He has developed cutting-edge web and client/server applications, E-Commerce customizations, and industry-specific solutions for clients. Currently working at the Government of...
Read more

Leave a Reply

-->
%d bloggers like this: