DropDownList rounded corners
asp.net dropdownlist web server control have many built in properties to design and style it
such as ForeColor, BackColor, BorderColor, BorderStyle etc. but there is no built in property to apply
rounded corners in dropdownlist control. the following asp.net c# example code demonstrate us how
can we display a rounded corners dropdownlist control in web browser.
We can take advantage from css style to create a rounded corners dropdownlist control. asp.net web server render a html single selection select element in web browser for each drodownlist server control.
So we write a css section in page header section to style html select element. in this css3 declaration we include the following css border styles those are -webkit-border-radius, -moz-border-radius and border-radius. -moz- prefix for support mozilla firefox web browser. -webkit- prefix for android, chrome, ios and safari web browser support. finally web browser render each select elements on web page with rounded corners (rounded borders).
We can take advantage from css style to create a rounded corners dropdownlist control. asp.net web server render a html single selection select element in web browser for each drodownlist server control.
So we write a css section in page header section to style html select element. in this css3 declaration we include the following css border styles those are -webkit-border-radius, -moz-border-radius and border-radius. -moz- prefix for support mozilla firefox web browser. -webkit- prefix for android, chrome, ios and safari web browser support. finally web browser render each select elements on web page with rounded corners (rounded borders).
dropdownlist-rounded-corners.aspx
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
string[] birds = {
"Muscovy Duck",
"Wood Duck",
"Mandarin Duck",
"Gadwall",
"American Wigeon",
"Mallard"
};
DropDownList1.DataSource = birds;
DropDownList1.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>asp.net dropdownlist rounded corners</title>
<style type="text/css">
.select {
-webkit-border-radius:24px;
-moz-border-radius:24px;
border-radius:24px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:MidnightBlue; font-style:italic;">
asp.net example - dropdownlist rounded corners
</h2>
<hr width="550" align="left" color="Gainsboro" />
<br /><br />
<asp:DropDownList
ID="DropDownList1"
runat="server"
AutoPostBack="true"
Width="350"
Font-Size="X-Large"
CssClass="select"
>
</asp:DropDownList>
</div>
</form>
</body>
</html>


- How to make DropDownList first item not selectable
- How to change DropDownList selected item text and background color
- How to remove arraow from DropDownList
- How to change DropDownList arrow image
- How to sort DropDownList items by text
- How to sort DropDownList items by value
- How to sort DropDownList items in descending order
- How to select DropDownList item by value
- How to select DropDownList item by item text
- How to create a DropDownList displaying years