Skip to content

PIE.htc and SharePoint 2010 – CSS3 Rounded Corners

by on March 13, 2012

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

http://css3pie.com/

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

Advertisements
11 Comments
  1. ferif permalink

    solved !! . Thank you very much

  2. 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

  3. when applying behavior: url(‘/_layouts/styles/PIE.htc’); to the necessary class the background and borders are hidding/not appearing, please help

    • emersonbruce permalink

      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 ^_^

  4. 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?

  5. thanks solved my problem

  6. Travis permalink

    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! 🙂

  7. for Sharepoint 2013?

    • should be basically the same – you may need to tweak a bit, but I can’t do everything for everyone ^_^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: