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

Amassed 8 years of experience in the information technology field. Extensive hands-on skills attained in a wide range of technologies. Proven ability of delivering fast, accurate results. Worked in various capacities in the information technology field including: programmer, programmer analyst, technical analyst and quality assurance specialist.

Leave a Reply

Follow me on Twitter

-->
%d bloggers like this: