向GridView添加圆角？

Question

I want to make the corners of my GridView curvy. I tried THIS but it it gave a border extending towards the right handside. Also it would be just great if i can make each and every cell of the GridView curvy, if its not too hard to achieve. This is my GridView:

<asp:GridView  ID="GridView1" runat="server" AutoGenerateColumns="False" 
                        onrowdatabound="GridView1_RowDataBound" BackColor="White" 
                        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" >
....something... </asp:GridView>

Answer 1

Here are three approaches all involving stylesheets.

.GridView1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

for css

or on your object

style= "-moz-border-radius: 15px;border-radius: 15px;"

or in JQuery

$("#GridView1").css("border-radius","15px").css("-moz-border-radius","15px");

Answer 2

Put a CssClass="round" in GridView1

.round
{
 border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Answer 3

Hi you can try by using CSS

<div class="corners">
<asp:GridView> </asp:GridView>
</div> 

and the css

.corners { border: 1px solid green; -moz-border-radius: 8px; border-radius: 8px;overflow: hidden;-webkit-border-radius: 8px;}

Answer 4

这就像一个魅力.... http://www.aspforums.net/Threads/749379/How-to-give-GridView-rounded-corners/Replies/1#Replies

Answer 5

This is how you can add the rounded corners to the ASP.NET GridView:

<style>
    :root{--gv-border-radius: 7px;}
    .rcgv
    {
        border-radius: var(--gv-border-radius);
        border-width: 0 !important;
    }
    .rcgv th:first-child
    {
        border-top-left-radius: var(--gv-border-radius);
    }
    .rcgv th:last-child
    {
        border-top-right-radius: var(--gv-border-radius);
    }
    .rcgv tr:last-child td:first-child
    {
        border-bottom-left-radius: var(--gv-border-radius);
    }
    .rcgv tr:last-child td:last-child
    {
        border-bottom-right-radius: var(--gv-border-radius);
    }
</style>
<asp:GridView ID="GridView1" CssClass="rcgv" runat="server" ShowFooter="true" ></asp:GridView>

Hope this will help you adding stylish border radius to GridView.