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>
<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
Join the conversation! Your thoughts help the community grow.