CODEWITHSUNDEEP
htmlcsscss-tables
S.Yankov
S.Yankov

Reputation: 107

Round table corners

Can you help me with making the table corners round? I've tried the simple border-radius but this just split the border in the corners. Is this caused by my browser (Firefox) or its a bug ? Jsfiddle - http://jsfiddle.net/vuys8eef/

Upvotes: 0

Views: 701

Answers (3)

service-paradis
service-paradis

Reputation: 3398

You need to round corners for the first and last columns of your first and last row in your table.

Something like this:

table tr:first-child th:first-child {
    border-top-left-radius: 10px;
}


table tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

You can see your updated fiddle

Upvotes: 3

Szymon
Szymon

Reputation: 1290

Hello your code is fine but you could to use overflow:hidden on table to hide content inside. That's one way to do this :)

example JSFIDDLE

Upvotes: 1

Peter Girnus
Peter Girnus

Reputation: 2739

You were applying it to the wrong element, use this instead.

td, th{
   border-radius: 5px;
}

CODEPEN DEMO

Upvotes: 1

Related Questions