Round Box Effects in SharePoint with CSS3Pie


Boxes with rounded corners seem all the rage these days, unsurprisingly perhaps, since there seems to be some neuro-biological factors which make rounded corners easier on the eye, or perhaps that should be the brain (I saw some random post about the subject somewhere, probably off twitter).

So looking at how you can get this effect into your SharePoint project, Google turns up many solutions, and of course a lot depends on the browsers you need to support.

In this solution (thanks @gusfraser / http://techblurt.com for the CSS3Pie link), Mozilla, Webkit and IE 6+ are supported browser scenarios, the solution actually uses CSS 3 style rules to display round corners, since Mozilla, Webkit and IE 9 support CSS3 and for the other IE versions, a behaviour plugin is used to recreate the CSS 3 effects – you can find a lot more information about the CSS3 style rules supported and the download required here at CSS3Pie.

Incidently, the CSS3Pie site has a nice style rule builder for creating style rules to achieve the following effects;

  • Round Corners
  • Drop Shadows
  • Background Gradients

    CSS3 PIE Builder
    CSS3 PIE Builder

For your SharePoint project the only file you need to deploy (aside from your project assets) is the pie.htc file and this can be located in either the Style Library or in the SharePoint root, I’ve deployed it to the SharePoint root in the _Layouts/jquery folder.

So having deployed the behaviour file, you would create some HTML markup and assign it a CSS class as shown

<DIV class="roundbox1"><SPAN>Round Box 1 Content</SPAN></DIV>

And then create the CSS style rules

.roundbox1
{ padding:60px 0;
 width:200px;
 text-align:center;
 background-color:white;
 border: 1px solid #0072bc;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: #BDBDBD 3px 3px 3px;
 -moz-box-shadow: #BDBDBD 3px 3px 3px;
 box-shadow: #BDBDBD 3px 3px 3px;
 behavior: url(/_layouts/jquery/pie.htc);
}

1st thing to note is the reference to the behavior file (pie.htc), next you’ll notice the Mozilla, WebKit and IE9 supported CSS 3 attributes, which in IE 8 and below is interpreted by the IE behavior.

  1. -webkit-border-radius
  2. -moz-border-radius
  3. border-radius

The other CSS attributes will no doubt be familiar, so with all this in place what does it look like

Where's my rounded corner box
Where's my rounded corner box

Not quite what we were expecting since there are no borders showing, rounded or otherwise. The site I’ve placed this on is an uncustomised publishing site with the stock v4 masterpage and OOTB styling.

This should work, I’ve taken the HTML markup and style rules (as above) and placed them in a bare .html file which upon browsing shows a DIV with rounded corners, to be honest I don’t have the time or inclination to find out exactly why this doesn’t work – if you do, cool, let me know 🙂

After some finagling of the CSS it turns out that adding the position:relative attribute causes it to work correctly, not sure why that should be and don’t see any mention of it in the CSS3Pie documentation.

So the CSS class for our rounded corner box now becomes;

.roundbox2
{ position:relative;
   padding:60px 0;
 width:200px;
 text-align:center;
 background-color:white;
 border: 1px solid #0072bc;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: #BDBDBD 3px 3px 3px;
 -moz-box-shadow: #BDBDBD 3px 3px 3px;
 box-shadow: #BDBDBD 3px 3px 3px;
 behavior: url(/_layouts/jquery/pie.htc);
}

And in the browser our rounded corner box displays as expected;

One thing to be aware of is that if you are using IE 8 and below, the IE behavior adds some markup to your page in order to create the desired effects, as the following image shows;

CSS3Pie modifies your pagemarkup
CSS3Pie modifies your pagemarkup

Using this technique it’s possible to create some quite compelling UI features with which to build your branding solution as I did on a recent couple of projects;

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

3 thoughts on “Round Box Effects in SharePoint with CSS3Pie

  1. Thank you so much! This help is awesome. 🙂 I was wondering how it’s possible works in normal page in IE9 but doesn’t work in Sharepoint page.

  2. So to put it all together you then placed borderless web parts in your rounded html boxes? Sorry for the confusion, I recently got PIE to work on the navigation bar and I am struggling to apply it to other areas…..

    -JT

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