PIE.htc and SharePoint 2010 – CSS3 Rounded Corners
So you want to incorporate the nice clean rounded corners solutions offered by CSS3 into SharePoint. Darn, doesn’t work in IE. Sadly, IE 8 and earlier does not properly render box-shadow, corner-radius, etc.
Enter PIE.htc
Now you can have beautiful backward compatible rounded corners, gradients, box shadows, and more.
Enter SharePoint 2010
HMMM. Pie must be relative to the page so you try the following
Does not work: behavior: url("/Style Library/ProjectName/js/PIE.htc");
Pie.htc is in /style library/sitename/js
Does not work: behavior: url("/PIE.htc");
Pie.htc is in “all files” in SPD
Solution
Does work: behavior: url("/_layouts/ProjectName/pie.htc");
Pie.htc is on the server file system in the mapped Layouts directory in the folder ProjectName
Best part? This makes it available across multiple applications!
_Layouts Folder Location in the File System in SharePoint 2010
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ProjectName
Create a folder called ProjectName and put any project specific files you would like here, including PIE.htc!
NOTE: For an even simpler solution, you may just want to put it directly in the _layouts folder so it can easily be used by multiple themes, projects, etc.- however, there may be permissions issues to take care of
Chaya - Digital Zen 
solved !! . Thank you very much
this works but not for all, i like to give round corners to all areas of sharepoint site, any one is working,
div#footer .cnt,.s4-ql ul.root li a, div.BreadCrumbWrap{behavior: url(‘/_layouts/styles/PIE.htc’);}
can u help me on this only footer is getting the round corners not for other areas.
thanks
when applying behavior: url(‘/_layouts/styles/PIE.htc’); to the necessary class the background and borders are hidding/not appearing, please help
Make sure you are using it correctly http://css3pie.com/
And some nice examples: http://css3pie.com/demos/gradient-patterns/
Features: http://css3pie.com/documentation/supported-css3-features/
Pie supports all sorts of CSS3 features, but you still need to specify them!
div#myid, div.myclass > div {
background: #cccccc;
border: solid 1px #333333;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #f1f1f1;
-webkit-box-shadow: 5px 5px 5px #f1f1f1;
box-shadow: 5px 5px 5px #f1f1f1;
behavior: url(/_layouts/styles/PIE.htc);
}
You may also need to be very specific to override some SP CSS, or even resort to using the !important flag.
Examples:
border-top: solid 1px red;
background-color: red!important;
My best advice – intensive css therapy ^_^
Thanks for the article. When I apply the rounded-corners to the top level navigation tabs, I can’t use hover effect. It says parent node is not an object or empty. Can you please help?
Double check what object is actually getting applied to. The pie.htc creates new objects that overlay.
thanks solved my problem
Not sure if you still check this post but I am trying this with SharePoint 2013 but it doesn’t work! I mean the rounded corners ect work fine normally using IE9 and up but when I use IE8 doesn’t work so I tried putting the PIE.htc file in the SharePoint root Layouts folder and did my css but still IE8 doesn’t work.
Any ideas. Here is my css
.featured {
position:relative;
width: 220px;
float: left;
margin-bottom: 50px;
background: #FFF;
/* curved border radius */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(/_layouts/jquery/pie.htc);
border: solid 2px;
border-color:#CCC;
}
The /14 folder is for sp 2010, so if you put it here, rather than a sp 2013 mapped directory, I imagine it would not work.
Try putting pie.htc in a different location, see if you can access the file directly.
Hope that helps!
By the by, I am currently job hunting, so if you know anyone looking for a skilled sp or web front end designer / developer, let me know! 🙂
for Sharepoint 2013?
should be basically the same – you may need to tweak a bit, but I can’t do everything for everyone ^_^