HOW TO USE ASP.NET AJAX ROUND CORNER EXTENDER

HOW TO USE ASP.NET AJAX ROUND CORNER EXTENDER

ASP.NET AJAX round corner extender allows users to make any server side control as round cornered.

Note: same effect can be acheived with CSS3.0 border-radius 

1) Declare toolkit manager

2) Add TextBox which require Round corners

3) Add Ajax Round Corner Extender define target control and radius and border color. properties.

  <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

    <h1>ASP.NET AJAX ROUND CORNER EXTENDER DEMO</h1>

    <div>

          <b>UserName</b>&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

          <asp:RoundedCornersExtender ID="txtUserName_RoundedCornersExtender"  Corners="Right"

              runat="server" BorderColor="Red" Color="LightCoral" Enabled="True" 

              TargetControlID="txtUserName">

          </asp:RoundedCornersExtender>

          <br /><br />

          <b>FirstName</b>&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

          <br /><br />

                    <asp:RoundedCornersExtender ID="RoundedCornersExtender1"  Corners="Right"

              runat="server" BorderColor="Red" Color="LightCoral" Enabled="True" 

              TargetControlID="txtFirstName">

          </asp:RoundedCornersExtender>

          

          <b>LastName</b>&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>

          

          <br /><br />

          <asp:RoundedCornersExtender ID="RoundedCornersExtender2" Corners="Right"

              runat="server" BorderColor="Red" Color="LightCoral" Enabled="True" 

              TargetControlID="txtLastName">

          </asp:RoundedCornersExtender>

          <asp:Button ID="btnLogin" runat="server" Text="Login" />

ASP.NET AJAX ROUND CORNER EXTENDER  PROPERTIES

1) TARGET CONTROL ID

2) RADIUS(DEFAULT 5)

3) BORDERCOLOR

4) CORNERS(ALL,RIGHT,BOTTOMRIGHT ETC.,)

ROUND CORNER EXTENDER FOR PANEL CONTROL

          <asp:panel  runat="server" ID="panel1"  BorderColor="Red" BorderStyle="Solid" BorderWidth="10px" BackColor="Teal" ForeColor="White">

          

          The RoundedCorners extender applies rounded corners to existing elements. To accomplish this it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose the corners of the target panel that should be rounded by setting the Corners property on the extender to None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All.

          </asp:panel>

          <asp:RoundedCornersExtender ID="RoundedCornersExtender2" 

              runat="server" BorderColor="Red" Color="LightCoral" Enabled="True" 

              TargetControlID="panel1"   Radius="10" Corners="All">

          </asp:RoundedCornersExtender>

Tags:  HOW TO USE ASP.NET AJAX ROUND CORNER EXTENDER,ajax round corner extender, asp.net round corner extender for textbox  asp.net ajax round corner extender for panel.