Skip to content 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.


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/"); is in /style library/sitename/js

Does not work: behavior: url("/"); is in “all files” in SPD


Does work: behavior: url("/_layouts/ProjectName/"); 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!

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

  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/’);}

    can u help me on this only footer is getting the round corners not for other areas.


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

    • emersonbruce permalink

      Make sure you are using it correctly

      And some nice examples:


      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/;

      You may also need to be very specific to override some SP CSS, or even resort to using the !important flag.


      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 file in the SharePoint root Layouts folder and did my css but still IE8 doesn’t work.

    Any ideas. Here is my css

    .featured {
    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/;
    border: solid 2px;

    • 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 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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: