Rounded Corners with jQuery
I recently had a client request rounded corners for their navigation tabs and some of the headers on their SharePoint site. If they were using IE 9 I would simply have been able to use the following block of code in the CSS:
border-top-left-radius: 10px; -moz-border-top-left-radius:10px; -webkit-border-top-left-radius:10px; border-top-right-radius: 10px; -moz-border-top-right-radius:10px; -webkit-border-top-right-radius:10px;
For more information on what is actually happening in the CSS above please visit: http://www.css3.info/preview/rounded-border
Unfortunately as I am learning very quickly many users are still on IE 8 and below so web developer’s need to be able to overcome the limitations of older browsers and still provide the end result expected in the most efficient manner possible. Enter the jQuery plugin jquery.corner.js. Simply add the reference to your jQuery library and the jquery.corner.js file in your master page and watch the magic happen without making any more adjustments to your CSS.
In this instance I had three elements that required rounded corners on the top: tdGreyHeader, trBlueHeader, and menu-item. Once these were added into the Master Page voila! Rounded corners in IE 7 and up without having to create images to mimic the appearance of rounded corners. If you click on the link to jquery.corner.js above there is a wonderful site that shows you how to do pretty much anything you can think of with cornering with code and visual examples.