How to add border radius on table row

Question

Does anyone know how to style tr as we like   I ve used border-collapse on table  after that tr s can display 1px solid border I give them   However  when I ve tried -moz-border-radius  it doesn t work  Even simple margin doesn t work

User · Answer

All the answers are way too long  The easiest way to add border radius to a table element that accepts border as a property  is doing border radius with overflow  hidden   border  xStyle xColor xSize  border-collapse  collapse  border-radius  1em  overflow  hidden

User · Answer

According to Opera the CSS3 standard does not define the use of border-radius on TDs   My experience is that Firefox and Chrome support it but Opera does not  don t know about IE   The workaround is to wrap the td content in a div and then apply the border-radius to the div

User · Answer

Use border-collapse seperate  and border-spacing 0  but only use border-right and border-bottom for the tds  with border-top applied to th and border-left applied to only tr td nth-child 1    You can then apply border radius to the corner tds  using nth-child to find them   https   jsfiddle net j4wm1f29    lt table gt     lt tr gt       lt th gt title 1 lt  th gt       lt th gt title 2 lt  th gt       lt th gt title 3 lt  th gt     lt  tr gt     lt tr gt       lt td gt item 1 lt  td gt       lt td gt item 2 lt  td gt       lt td gt item 3 lt  td gt     lt  tr gt     lt tr gt       lt td gt item 1 lt  td gt       lt td gt item 2 lt  td gt       lt td gt item 3 lt  td gt     lt  tr gt     lt tr gt       lt td gt item 1 lt  td gt       lt td gt item 2 lt  td gt       lt td gt item 3 lt  td gt     lt  tr gt     lt tr gt       lt td gt item 1 lt  td gt       lt td gt item 2 lt  td gt       lt td gt item 3 lt  td gt     lt  tr gt   lt  table gt    table     border-collapse  seperate    border-spacing  0     tr th  tr td     padding  20px    border-right  1px solid  000    border-bottom  1px solid  000     tr th     border-top  1px solid  000     tr td nth-child 1   tr th nth-child 1      border-left  1px solid  000        border radius    tr th nth-child 1      border-radius  10px 0 0 0     tr th nth-last-child 1      border-radius  0 10px 0 0     tr nth-last-child 1  td nth-child 1      border-radius  0 0 0 10px     tr nth-last-child 1  td nth-last-child 1      border-radius  0 0 10px 0

User · Answer

The tr element does honor the border-radius  Can use pure html and css  no javascript    JSFiddle link  http   jsfiddle net pflies zL08hqp1 10    x000D   x000D  tr   x000D      border  0  x000D      display  block  x000D      margin  5px  x000D    x000D   solid   x000D      border  2px red solid  x000D      border-radius  10px  x000D    x000D   dotted   x000D      border  2px green dotted  x000D      border-radius  10px  x000D    x000D   dashed   x000D      border  2px blue dashed  x000D      border-radius  10px  x000D    x000D   x000D  td   x000D      padding  5px  x000D    x000D   lt table gt  x000D       lt tr gt  x000D           lt td gt 01 lt  td gt  x000D           lt td gt 02 lt  td gt  x000D           lt td gt 03 lt  td gt  x000D           lt td gt 04 lt  td gt  x000D           lt td gt 05 lt  td gt  x000D           lt td gt 06 lt  td gt  x000D       lt  tr gt  x000D       lt tr class  dotted  gt  x000D           lt td gt 07 lt  td gt  x000D           lt td gt 08 lt  td gt  x000D           lt td gt 09 lt  td gt  x000D           lt td gt 10 lt  td gt  x000D           lt td gt 11 lt  td gt  x000D           lt td gt 12 lt  td gt  x000D       lt  tr gt  x000D       lt tr class  solid  gt  x000D           lt td gt 13 lt  td gt  x000D           lt td gt 14 lt  td gt  x000D           lt td gt 15 lt  td gt  x000D           lt td gt 16 lt  td gt  x000D           lt td gt 17 lt  td gt  x000D           lt td gt 18 lt  td gt  x000D       lt  tr gt  x000D       lt tr class  dotted  gt  x000D           lt td gt 19 lt  td gt  x000D           lt td gt 20 lt  td gt  x000D           lt td gt 21 lt  td gt  x000D           lt td gt 22 lt  td gt  x000D           lt td gt 23 lt  td gt  x000D           lt td gt 24 lt  td gt  x000D       lt  tr gt  x000D       lt tr class  dashed  gt  x000D           lt td gt 25 lt  td gt  x000D           lt td gt 26 lt  td gt  x000D           lt td gt 27 lt  td gt  x000D           lt td gt 28 lt  td gt  x000D           lt td gt 29 lt  td gt  x000D           lt td gt 30 lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

You can only apply border-radius to td  not tr or table   I ve gotten around this for rounded corner tables by using these styles   table   border-collapse  separate    td   border  solid 1px  000    tr first-child td first-child   border-top-left-radius  10px    tr first-child td last-child   border-top-right-radius  10px    tr last-child td first-child   border-bottom-left-radius  10px    tr last-child td last-child   border-bottom-right-radius  10px      Be sure to provide all the vendor prefixes  Here s an example of it in action

User · Answer

Not trying to take any credits here  all credit goes to  theazureshadow for his reply  but I personally had to adapt it for a table that has some  lt th gt  instead of  lt td gt  for it s first row s cells   I m just posting the modified version here in case some of you want to use  theazureshadow s solution  but like me  have some  lt th gt  in the first  lt tr gt   The class  reportTable  only have to be applied to the table itself    table reportTable       border-collapse  separate      border-spacing  0     table reportTable td       border  solid gray 1px      border-style  solid none none solid      padding  10px     table reportTable td last-child       border-right  solid gray 1px     table reportTable tr last-child td      border-bottom  solid gray 1px     table reportTable th      border  solid gray 1px      border-style  solid none none solid      padding  10px     table reportTable th last-child      border-right  solid gray 1px      border-top-right-radius  10px     table reportTable th first-child      border-top-left-radius  10px     table reportTable tr last-child td first-child      border-bottom-left-radius  10px        table reportTable tr last-child td last-child      border-bottom-right-radius  10px      Feel free to adjust the paddings  radiuses  etc to fit your needs  Hope that helps people

User · Answer

I think collapsing your borders is the wrong thing to do in this case  Collapsing them basically means that the border between two neighboring cells becomes shared  This means it s unclear as to which direction it should curve given a radius   Instead  you can give a border radius to the two lefthand corners of the first TD and the two righthand corners of the last one  You can use first-child and last-child selectors as suggested by theazureshadow  but these may be poorly supported by older versions of IE  It might be easier to just define classes  such as  first-column and  last-column to serve this purpose

User · Answer

Bonus info  border-radius has no effect on tables with border-collapse  collapse  and border set on td s  And it doesn t matter if border-radius is set on table  tr or td   it s ignored   http   jsfiddle net Exe3g

User · Answer

I found that adding border-radius to tables  trs  and tds does not seem to work 100  in the latest versions of Chrome  FF  and IE   What I do instead is  I wrap the table with a div and put the border-radius on it    lt div class  tableWrapper  gt     lt table gt       lt tr gt  lt td gt Content lt  td gt  lt  tr gt     lt table gt   lt  div gt    tableWrapper     border-radius  4px    overflow  hidden      If your table is not width  100   you can make your wrapper float  left  just remember to clear it

User · Answer

Or use box-shadow if table have collapse

User · Answer

Actual Spacing Between Rows  This is an old thread  but I noticed reading the comments from the OP on other answers that the original goal was apparently to have border-radius on the rows  and gaps between the rows  It does not appear that the current solutions exactly do that  theazureshadow s answer is headed in the right direction  but seems to need a bit more   For those interested in such  here is a fiddle that does separate the rows and applies the radius to each row   NOTE  Firefox currently has a bug in displaying clipping background-color at the border radii    The code is as follows  and as theazureshadow noted  for earlier browser support  the various vendor prefixes for border-radius need added    table        border-collapse  separate       border-spacing  0 10px       margin-top  -10px     correct offset on first border spacing if desired      td       border  solid 1px  000      border-style  solid none      padding  10px      background-color  cyan    td first-child       border-left-style  solid      border-top-left-radius  10px       border-bottom-left-radius  10px    td last-child       border-right-style  solid      border-bottom-right-radius  10px       border-top-right-radius  10px

[css] How to add border radius on table row

Examples related to css