In this article I will explain with an example, how to create GridView with Rounded Corners using CSS in ASP.Net.
This article will illustrate how to make the GridView’s Corners rounded using an HTML DIV and the CSS3’s Rounded Corner CSS in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of two GridViews. For the first GridView, Paging has been disabled while for the second GridView Paging has been enabled.
Both the GridViews are wrapped inside an HTML DIV and the DIV has been assigned HTML CSS class named rounded_corners (described later).
Note: The width of the GridView and the HTML DIV must be equal to each other. If you are setting ItemStyle-Width or HeaderStyle-Width then make sure SUM of all column widths is equal to the width of the HTML DIV.
 
<div class="rounded_corners" style="width: 300px">
    <asp:GridView ID="GridView1" runat="server" Width="300" HeaderStyle-BackColor="#3AC0F2"
        HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White"
        RowStyle-ForeColor="#3A3A3A" AutoGenerateColumns="false" PageSize="10">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
</div>
<hr />
<div class="rounded_corners" style="width: 300px">
    <asp:GridView ID="GridView2" runat="server" Width="300" HeaderStyle-BackColor="#3AC0F2"
        HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White"
        RowStyle-ForeColor="#3A3A3A" AutoGenerateColumns="false" AllowPaging="true" PageSize="10"
        OnPageIndexChanging="OnPageIndexChanging">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
</div>
 
 
Namespaces
You will need to use the following namespace.
using System.Data;
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = GetSampleData();
    GridView1.DataSource = dt;
    GridView1.DataBind();
    GridView2.DataSource = dt;
    GridView2.DataBind();
}
 
private static DataTable GetSampleData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Name"), new DataColumn("City"), new DataColumn("Country") });
    dt.Rows.Add("Maria Anders", "Berlin", "Germany");
    dt.Rows.Add("Ana Trujillo", "México D.F.", "Mexico");
    dt.Rows.Add("Antonio Moreno", "México D.F.", "Mexico");
    dt.Rows.Add("Thomas Hardy", "London", "UK");
    dt.Rows.Add("Christina Berglund", "Luleå", "Sweden");
    dt.Rows.Add("Hanna Moos", "Mannheim", "Germany");
    dt.Rows.Add("Frédérique Citeaux", "Strasbourg", "France");
    dt.Rows.Add("Martín Sommer", "Madrid", "Spain");
    dt.Rows.Add("Laurence Lebihan", "Marseille", "France");
    dt.Rows.Add("Elizabeth Lincoln", "Tsawassen", "Canada");
    dt.Rows.Add("Victoria Ashworth", "London", "UK");
    dt.Rows.Add("Patricio Simpson", "Buenos Aires", "Argentina");
    dt.Rows.Add("Francisco Chang", "México D.F.", "Mexico");
    dt.Rows.Add("Yang Wang", "Bern", "Switzerland");
    dt.Rows.Add("Pedro Afonso", "Sao Paulo", "Brazil");
    dt.Rows.Add("Elizabeth Brown", "London", "UK");
    dt.Rows.Add("Sven Ottlieb", "Aachen", "Germany");
    dt.Rows.Add("Janine Labrune", "Nantes", "France");
    dt.Rows.Add("Ann Devon", "London", "UK");
    dt.Rows.Add("Roland Mendel", "Graz", "Austria");
    return dt;
}
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView2.PageIndex = e.NewPageIndex;
    GridView2.DataBind();
}
 
 
Rounded Corners CSS class
Below are the CSS classes and styles that you need to place on your page in order to make GridView corners round.
The webkit-border-radius and moz-border-radius CSS properties are used for rounding the corners of an HTML element.
<style type="text/css">
    .rounded_corners
    {
        border: 1px solid #A1DCF2;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        overflow: hidden;
    }
    .rounded_corners td, .rounded_corners th
    {
        border: 1px solid #A1DCF2;
        font-family: Arial;
        font-size: 10pt;
        text-align: center;
    }
    .rounded_corners table table td
    {
        border-style: none;
    }
</style>
 
 
Screenshots
Rounded Corners GridView without paging
ASP.Net GridView with Rounded Corners using CSS
 
Rounded Corners GridView with paging
ASP.Net GridView with Rounded Corners using CSS
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support CSS3.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code