How to create a rounded corners DropDownList in asp.net

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).

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>

More asp.net examples