Post
Ask Question

RoundedCornersExtender Control in AJAX Using ASP.NET


Introduction

The RoundedCornersExtender control adds rounded corners to elements. Its properties are given below.

  • TargetControlID : It set the ID of control which will be attached with RoundedCornersExtender.
  • Radius : It  is used to set the radius of corner. The default is 5.
  • Corners :  It is used to set the corner of the target element. There are different values for this. They are All, Buttom, ButtomLeft, ButtonRight, Left, None, Right, Top, TopLeft and TopRight.
  • Color : It is used to set the color of corners.
     

Now we take a ASP.NET Web Application and then we use a RoundedCornersExtender control to our application. Follow the given steps.

Step 1 : Take a ASP.NET Web Application.
Step 2 : Go to Toolbox and take ScriptManager at first on the form.



Step 3 : Take a Panel and take three Labels, two TextBoxes and one Button control inside the Panel. Change the Text property of a Label and Button like in the following figure.



Step 4 : Go to the ToolBox and take a RoundedCornersExtender control.



Code on .aspx page

<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server">
        </asp:RoundedCornersExtender>

Step 5 : Set the property of RoundedCornersExtender control.

       <asp:RoundedCornersExtender ID="RoundedCornersExtender1" TargetControlID="Panel1" Color="Black" Corners="Bottom" runat="server">
        </asp:RoundedCornersExtender>


Code on .aspx page

<head runat="server">
    <title></title>
    <style type="text/css">
    .pannelbg
    {
        background-color:White;
        width:400px;
      
    }
    </style>
</head>
<body style="background-color:Green">
    <form id="form1" runat="server" >
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Panel ID="Panel1" CssClass="pannelbg" runat="server">
        <asp:Label ID="lbllogin" Text="Login..." Font-Bold="true" Font-Size="20"  ForeColor="Red" runat="server"></asp:Label><br /><br />
        <table style="height:200; width:300">
        <tr>
        <td><asp:Label ID="lblusername" Text="User Name" Font-Bold="true" Font-Size="18" ForeColor="Red" runat="server"></asp:Label></td>
         <td><asp:TextBox ID="txtusername" Height="30" Width="150" Font-Size="20" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td><asp:Label ID="lblpwd" Text="Password" Font-Bold="true" Font-Size="18" ForeColor="Red" runat="server"></asp:Label></td>
         <td><asp:TextBox ID="txtpwd" Height="30" Width="150" Font-Size="20" TextMode="Password" runat="server"></asp:TextBox></td>
         <td></td>
        </tr>
        <tr>
        <td><asp:Button ID="btnlogin" Text="Login" Font-Bold="true" Height="41px"
                Font-Size="20" ForeColor="Black" runat="server" /> </td>
         <td></td>
        </tr>
        </table>
        </asp:Panel>      
        <asp:RoundedCornersExtender ID="RoundedCornersExtender1" TargetControlID="Panel1" Color="Black" Corners="Bottom" runat="server">
        </asp:RoundedCornersExtender>
    </div>   
    </form>
</body>
 
Run the application.


Now set the Radius and Corners properties.

<asp:RoundedCornersExtender ID="RoundedCornersExtender1" TargetControlID="Panel1" Radius="10" Color="Black" Corners="BottomRight" runat="server">
        </asp:RoundedCornersExtender>

Run the application.



Set its Corners property to "None".

 

Resources

AJAX Rating Control

DropShadowExtender Control in AJAX Using ASP.NET

RangeValidator Control With AJAX Using ASP.NET

ConfirmButtonExtender Control With AJAX Using ASP.NET


Similar Articles