Round table corners

Question

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/

Your question can be answered here [Rounded Table Corners CSS Only](http://stackoverflow.com/questions/4932181/rounded-table-corners-css-only) — Patrick Sharer, Nov 05 '15 at 20:29
Possible duplicate of [Rounded table corners CSS only](https://stackoverflow.com/questions/4932181/rounded-table-corners-css-only) — Brian Tompsett - 汤莱恩, Feb 09 '18 at 12:16

service-paradis · Accepted Answer · 2021-08-04T01:07:48.813

3

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

edited Aug 04 '21 at 01:07

answered Nov 05 '15 at 20:36

service-paradis

3,333
4
34
43

prefixes for ``border-radius`` are not needed. – Peter Girnus Nov 05 '15 at 20:39
just looking out for you, no one has time for extra work xP – Peter Girnus Nov 05 '15 at 20:46
Thanks. This fixed the problem. – S.Yankov Nov 06 '15 at 06:50

score 1 · Answer 2 · answered Nov 05 '15 at 20:31

1

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

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

CODEPEN DEMO

answered Nov 05 '15 at 20:31

Peter Girnus

2,673
1
19
24

score 1 · Answer 3 · answered Nov 05 '15 at 20:44

1

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

answered Nov 05 '15 at 20:44

Szymon

1,281
1
20
36

Round table corners

3 Answers3