Rounded Corners with jQuery

Duane OdumI 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.

code

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.

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