Rounded Corners: Comparing jQuery Corner with the AJAX Control Toolkit

If you're developing an ASP.NET application, adding a rounded corners extender to your panel is the most common way to get rid of the pointy ends. You can add borders to the rounded panel as well as assign a different color to the top and bottom edges of the panel. You'll probably run into the issue of not being able to add padding to the panel as that makes it go haywire. A work-around is to create another panel or div within your rounded panel and add padding or margins to it.

For a cleaner solution, you can give jQuery Corner a try. It's a plug-in available for jQuery to apply rounded corners (in a large variety of styles) and all you have to do is apply a CSS class to the panel or div and include a tiny JavaScript into your page. It works well as you can apply padding to the panel/div itself, without having to create any additional ones. However, you can't have a border to the rounded panel/div (jQuery Corner automatically removes the borders). jQuery Corner also gives you the benefit of being able to apply the rounded corners to non-ASP.NET pages so you can run a part of your website on another technology too.

Here are some samples with both that I came up with:


The Rounded Corners Extender can have borders and edge colors applied to it.



Adding padding to the Rounded Corners Extender keeps it from resizing with the window and makes it protrude from the right.