In this example you will see how to apply round corner using jquery plugin with out using images on asp.net server controls like textbox, dropdownlist and divs. You can download jquery corner plugin from here. Jquery corner plugin also provides different pattern, corner style, size, match, adornment and effects that you can apply.
Let see the example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery corner plugin</title>
<style>
select, input
{
padding: 5px;
border: 1px solid #ccc;
width: 200px;
}
div.corn
{
border: 1px solid #f00;
padding: 10px;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="http://malsup.github.com/jquery.corner.js"></script>
<script type="text/javascript">
$(function () {
$(".corn").corner("round 5px");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
FullName:
<asp:TextBox ID="TextBox1" runat="server" class="corn"></asp:TextBox>
</p>
<p>
Gender
<asp:DropDownList ID="dd1" runat="server" class="corn">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
</p>
<p>
<div class="corn">
Jquery Round corner plugin
</div>
</p>
</div>
</form>
</body>
</html>
Output
Demo
See live demo
Download
Jquery-round-corner.aspx (1.65 kb)