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

  

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

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;

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;