CSS corner rounding in SharePoint

Because who needs to create 19 thousand .png images just to get a nice rounder corner.

Along comes CSS3 and some nice rounding effects for your stylesheet.

#top-rounder-corners{
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-khtml-border-radius-: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
/*left top, right top, right bottom, left bottom*/
}

Simple enough, just remember to modify your master page to allow for rendering in IE9, big thanks to Randy Drisgill for this informative post

I changed DOCTYPE to: <!DOCTYPE HTML>

And changed the meta to: <meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8″ />

For some more reading: This of course was after a good 2 hours of frustration as my corners just didn’t want to go all nice and rounded in IE9.

Back to IE9, what happens is that with the compatibility set to IE=8 SharePoint will always render the content for IE8, which was the little part that got me..

Now my new master page looks awesome in all our browsers.. well just not in IE8, it merely looks pretty in IE8.. I can live with that.

After viewing this amazing article about rounding you should have a better idea of how this works.

Adrian

0 views0 comments

Recent Posts

See All

SharePoint 2010 and Adobe PDF

SharePoint does not do crawl PDFs out of the box.. here is how to get it to do it. Download and install Adobe’s 64-bit PDF iFilter*1 http://www.adobe.com/support/downloads/detail.jsp?ftpID=4025 Downlo