Contribute
AJAX

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs