How to add rounded corner div on web page using Ajax Toolkit

Adding a panel on a web page with rounded corners is something very common that we all do at some point in web application development. We all have been thought standard solution of using a collection of images to arrange them in a manner that they form a rectangle with rounded corners. If you are developing ASP.Net web site then, Ajax Toolkit makes this task every easy for you. By adding one additional control tag you end up adding a rounded corner panel around an existing panel. Let's see how this done.

• I am going to skip the discussion on download of Ajax toolkip, installation and all that good stuff. I am going to assume that you have already done it.
• Add reference to AjaxControlToolkit.dll assembly to your ASP.Net project if you do not already have it added.
• At the top of the page add tag for registering TagPrefix for the controls in this Ajax assembly.

  <%@ Register Assembly="AjaxControlToolkit" 
   Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
  

• Make sure that you add ScriptManager server control tag on the page as well. Otherwise you will end up with the following run time error.
  The control with ID 'intoPanelRoundedCornersExtender' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
  In my case I just added in the master page of the site.

  <asp:ScriptManager ID="masterScriptManager" runat="server" />
  

• Now add RoundedCornersExtender control on the page. The most important property to set is TargetControlID. This ID of the control around which rounded corner panel is going to be added. Without it, the control will not work.

  <ajaxToolkit:RoundedCornersExtender ID="intoPanelRoundedCornersExtender" runat="server"
   BehaviorID="RoundedCornersBehavior1"
   TargetControlID="siteIntroPanel"
   Radius="6"
   BorderColor="#111"
   Color="#696969"
   Corners="All" />
  

  Other property that can be set to control behavior of rounded corner panel are Color,BorderColor, Radious and Corners. The names of these properties pretty much tell what these are supposed to control.

See how easy it is to add these rounded corners. You can see the demo on this live site. The top two panel are created using this RoundedCornerExtender control from Ajax toolkit.