Question

I want to have a gridview with a red outer border and blue inner separator lines and used this markup/css:

<asp:GridView runat="server" ID="entries" CssClass="grid" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />        
    </Columns>        
 </asp:GridView>

.grid
{
border: solid 1px Red !important;
}

.grid td
{
border: solid 1px Blue;
}

But the result is that only the header row has a red outer border, not the others.
I also tried RowStyle in the same way, with no success.
Tested in IE 9, Chrome.

Answer 1

UPDATE

I got it I think, try this:

.grid { border: solid 1px Red; }
.grid td { border-top:solid 1px blue; }
.grid th { border-top:solid 1px red !important; }   
.grid th.first { border-right:solid 1px blue !important; }
.grid th.last { border-left:solid 1px blue !important; }    
.grid td.first { border-right:solid 1px blue !important; }
.grid td.last { border-left:solid 1px blue !important; }


<asp:BoundField DataField="Id" HeaderText="Id" HeaderStyle-CssClass="first" ItemStyle-CssClass="first" />

<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="last" ItemStyle-CssClass="last" />

Tested with IE9.

If you want to add boundfields, add them between the first and last one without cssclass.

The first and last boundfield must have .first and .last cssclass.