Rounded table corners CSS only

Question

I have searched and searched  but haven t been able to find a solution for my requirement   I have a plain ol  HTML table  I want round corners for it  without using images or JS  i e  pure CSS only  Like this     Rounded corners for corner cells  and 1px thick border for the cells   So far I have this   table     -moz-border-radius  5px  important    border-collapse  collapse  important    border  none  important    table th  table td     border  none  important   table th first-child     -moz-border-radius  5px 0 0 0  important    table th last-child     -moz-border-radius  0 5px 0 0  important    table tr last-child td first-child     -moz-border-radius  0 0 0 5px  important    table tr last-child td last-child     -moz-border-radius  0 0 5px 0  important    table tr hover td     background-color   ddd  important     But that leaves me without any borders for the cells  If I add borders  they aren t rounded   Any solutions

User · Accepted Answer

Seems to work fine in FF and Chrome  haven t tested any others  with separate borders  http   jsfiddle net 7veZQ 3   Edit  Here s a relatively clean implementation of your sketch     x000D   x000D  table   x000D      border-collapse separate  x000D      border solid black 1px  x000D      border-radius 6px  x000D      -moz-border-radius 6px  x000D    x000D   x000D  td  th   x000D      border-left solid black 1px  x000D      border-top solid black 1px  x000D    x000D   x000D  th   x000D      background-color  blue  x000D      border-top  none  x000D    x000D   x000D  td first-child  th first-child   x000D       border-left  none  x000D    x000D   lt table gt  x000D       lt thead gt  x000D       lt tr gt  x000D           lt th gt blah lt  th gt  x000D           lt th gt fwee lt  th gt  x000D           lt th gt spoon lt  th gt  x000D       lt  tr gt  x000D       lt  thead gt  x000D       lt tr gt  x000D           lt td gt blah lt  td gt  x000D           lt td gt fwee lt  td gt  x000D           lt td gt spoon lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt blah lt  td gt  x000D           lt td gt fwee lt  td gt  x000D           lt td gt spoon lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    http   jsfiddle net MuZzz 3577

User · Answer

This is css3  only recent non-IE lt 9 browser will support it   Check out here  it derives the round property for all available browsers

User · Answer

The best solution I ve found for rounded corners and other CSS3 behavior for IE lt 9 can be found here  http   css3pie com   Download the plug-in  copy to a directory in your solution structure  Then in your stylesheet make sure to have the behavior tag so that it pulls in the plug-in   Simple example from my project which gives me rounded corners  color gradient  and box shadow for my table    table-canvas        -webkit-border-radius  8px      -moz-border-radius  8px      overflow hidden      border-radius  10px      -pie-background  linear-gradient  ece9d8   E5ECD8          box-shadow   666 0px 2px 3px      behavior  url Include PIE htc       overflow  hidden      Don t worry if your Visual Studio CSS intellisense gives you the green underline for unknown properites  it still works when you run it  Some of the elements are not very clearly documented  but the examples are pretty good  especially on the front page

User · Answer

To adapt  luke flournoy s brilliant answer - and if you re not using th in your table  here s all the CSS you need to make a rounded table    my table  border-collapse  separate  border-spacing  0  border  1px solid grey  border-radius  10px  -moz-border-radius  10px  -webkit-border-radius  10px      my table tr first-of-type     border-top-left-radius  10px      my table tr first-of-type td last-of-type     border-top-right-radius  10px      my table tr last-of-type td first-of-type     border-bottom-left-radius  10px      my table tr last-of-type td last-of-type     border-bottom-right-radius  10px

User · Answer

The following is something I used that worked for me across browsers so I hope it helps someone in the future:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Obviously the #contentblock portion can be replaced/edited as needed and you can find the border-radius.htc file by doing a search in Google or your favorite web browser.

User · Answer

Through personal expeirence I ve found that it s not possible to round corners of an HTML table cell with pure CSS  Rounding a table s outermost border is possible   You will have to resort to using images as described in this tutorial  or any similar

User · Answer

CSS   table     border  1px solid black    border-radius  10px    border-collapse  collapse    overflow  hidden     td     padding  0 5em 1em    border  1px solid black

User · Answer

For a bordered and scrollable table  use this  replace variables    starting texts   If you use thead  tfoot or th  just replace tr first-child and tr-last-child and td with them    table-wrap     border   border solid  color-border    border-radius   border-radius    table     border-collapse  collapse    border-spacing  0    table td   border   border solid  color-border    table td first-child   border-left  none    table td last-child   border-right  none    table tr first-child td   border-top  none    table tr last-child td   border-bottom  none    table tr first-child td first-child   border-top-left-radius   border-radius    table tr first-child td last-child   border-top-right-radius   border-radius    table tr last-child td first-child   border-bottom-left-radius   border-radius    table tr last-child td last-child   border-bottom-right-radius   border-radius      HTML    lt div id table-wrap gt     lt table gt       lt tr gt          lt td gt 1 lt  td gt          lt td gt 2 lt  td gt       lt  tr gt       lt tr gt          lt td gt 3 lt  td gt          lt td gt 4 lt  td gt       lt  tr gt     lt  table gt   lt  div gt

User · Answer

Lesson in Table Borders     NOTE   The HTML CSS code below should be viewed in IE only   The code will not be rendered correctly in Chrome   We need to remember that      A table has a border  its outer boundary  which can also have a border-radius   The cells themselves ALSO have borders  which too  can also have a border-radius   The table and cell borders can interfere with each other     The cell border can pierce through the table border  ie  table boundary      To see this effect  amend the CSS style rules in the code below as follows      i  table  border-collapse  separate       ii   Delete the style rules which round the corner cells of the table      iii  Then play with border-spacing so you can see the interference  However  the table border and cell borders can be COLLAPSED  using  border-collapse  collapse    When they are collapsed  the cell and table borders interfere in a different way   i  If the table border is rounded but cell borders remain square  then the cell s shape takes precedence and the table loses its curved corners     ii  Conversely  if the corner cell s are curved but the table boundary is square  then you will see an ugly square corner bordering the curvature of the corner cells    Given that cell s attribute takes precedence  the way to round the table s four corner s then  is by     i  Collapsing borders on the table  using  border-collapse  collapse       ii  Setting your desired curvature on the corner cells of the table  iii  It does not matter if the table s corner s are rounded  ie  Its border-radius can be zero        x000D   x000D      zui-table-rounded   x000D      border  2px solid blue  x000D        border-radius  20px    x000D       x000D      border-collapse  collapse  x000D      border-spacing  0px  x000D       x000D         x000D      zui-table-rounded thead th first-child   x000D      border-radius  30px 0 0 0  x000D       x000D      x000D      zui-table-rounded thead th last-child   x000D      border-radius  0 10px 0 0  x000D       x000D      x000D      zui-table-rounded tbody tr last-child td first-child   x000D      border-radius  0 0 0 10px  x000D       x000D      x000D      zui-table-rounded tbody tr last-child td last-child   x000D      border-radius  0 0 10px 0  x000D       x000D      x000D      x000D      zui-table-rounded thead th   x000D      background-color   CFAD70  x000D       x000D      x000D      zui-table-rounded tbody td   x000D      border-top  solid 1px  957030  x000D      background-color   EED592  x000D       x000D      lt table class  zui-table-rounded  gt  x000D      lt thead gt  x000D       lt tr gt  x000D        lt th gt Name lt  th gt  x000D        lt th gt Position lt  th gt  x000D        lt th gt Height lt  th gt  x000D        lt th gt Born lt  th gt  x000D        lt th gt Salary lt  th gt  x000D       lt  tr gt  x000D      lt  thead gt  x000D      lt tbody gt  x000D       lt tr gt  x000D        lt td gt DeMarcus Cousins lt  td gt  x000D        lt td gt C lt  td gt  x000D        lt td gt 6 11  lt  td gt  x000D        lt td gt 08-13-1990 lt  td gt  x000D        lt td gt  4 917 000 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D        lt td gt Isaiah Thomas lt  td gt  x000D        lt td gt PG lt  td gt  x000D        lt td gt 5 9  lt  td gt  x000D        lt td gt 02-07-1989 lt  td gt  x000D        lt td gt  473 604 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D        lt td gt Ben McLemore lt  td gt  x000D        lt td gt SG lt  td gt  x000D        lt td gt 6 5  lt  td gt  x000D        lt td gt 02-11-1993 lt  td gt  x000D        lt td gt  2 895 960 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D        lt td gt Marcus Thornton lt  td gt  x000D        lt td gt SG lt  td gt  x000D        lt td gt 6 4  lt  td gt  x000D        lt td gt 05-05-1987 lt  td gt  x000D        lt td gt  7 000 000 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D        lt td gt Jason Thompson lt  td gt  x000D        lt td gt PF lt  td gt  x000D        lt td gt 6 11  lt  td gt  x000D        lt td gt 06-21-1986 lt  td gt  x000D        lt td gt  3 001 000 lt  td gt  x000D       lt  tr gt  x000D      lt  tbody gt  x000D     lt  table gt  x000D   x000D   x000D

User · Answer

The selected answer is terrible  I would implement this by targeting the corner table cells and applying the corresponding border radius    To get the top corners  set the border radius on the first and last of type of the th elements  then finish by setting the border radius on the last and first of td type on the last of type tr to get the bottom corners   th first-of-type     border-top-left-radius  10px    th last-of-type     border-top-right-radius  10px    tr last-of-type td first-of-type     border-bottom-left-radius  10px    tr last-of-type td last-of-type     border-bottom-right-radius  10px

User · Answer

Add between  lt head gt  tags    lt style gt    td  background   ffddaa  width  20     lt  style gt    and in the body    lt div style  background  black  border-radius  12px   gt     lt table width  100   style  cell-spacing  1px   gt       lt tr gt         lt td style  border-top-left-radius  10px   gt          Noordwest        lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt Noord lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td style  border-top-right-radius  10px   gt          Noordoost        lt  td gt       lt  tr gt       lt tr gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt         lt td gt West lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt Centrum lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt Oost lt  td gt       lt  tr gt       lt tr gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt         lt td style  border-bottom-left-radius  10px   gt          Zuidwest        lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td gt Zuid lt  td gt         lt td gt  amp nbsp  lt  td gt         lt td style  border-bottom-right-radius  10px   gt          Zuidoost        lt  td gt       lt  tr gt     lt  table gt   lt  div gt    The cell color  contents and formatting are of course for example  it s about spacing color-filled cells within a div  Doing so  the black cell borders table border are actually the div background color  Note that you ll need to set the div-border-radius about 2 values greater than the separate cell corner border radii  to take a smooth rounded corner effect

User · Answer

For me  the Twitter Bootstrap Solution looks good  It excludes IE  lt  9  no round corners in IE 8 and lower   but that s O K  I think  if you develop prospective Web-Apps    CSS HTML    x000D   x000D  table    x000D      border  1px solid  ddd  x000D      border-collapse  separate  x000D      border-left  0  x000D      border-radius  4px  x000D      border-spacing  0px  x000D    x000D  thead   x000D      display  table-header-group  x000D      vertical-align  middle  x000D      border-color  inherit  x000D      border-collapse  separate  x000D    x000D  tr   x000D      display  table-row  x000D      vertical-align  inherit  x000D      border-color  inherit  x000D    x000D  th  td   x000D      padding  5px 4px 6px 4px   x000D      text-align  left  x000D      vertical-align  top  x000D      border-left  1px solid  ddd      x000D    x000D  td   x000D      border-top  1px solid  ddd      x000D    x000D  thead first-child tr first-child th first-child  tbody first-child tr first-child td first-child   x000D      border-radius  4px 0 0 0  x000D    x000D  thead last-child tr last-child th first-child  tbody last-child tr last-child td first-child   x000D      border-radius  0 0 0 4px  x000D    x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  lt th gt xxx lt  th gt  lt th gt xxx lt  th gt  lt th gt xxx lt  th gt  lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt td gt xxx lt  td gt  lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    You can play with that here  on jsFiddle

User · Answer

Firstly  you ll need more than just -moz-border-radius if you want to support all browsers  You should specify all variants  including plain border-radius  as follows   -moz-border-radius  5px  -webkit-border-radius  5px  border-radius  5px    Secondly  to directly answer your question  border-radius doesn t actually display a border  it just sets how the corners look of the border  if there is one   To turn on the border  and thus get your rounded corners  you also need the border attribute on your td and th elements   td  th      border solid black 1px      You will also see the rounded corners if you have a background colour  or graphic   although of course it would need to be a different background colour to the surrounding element in order for the rounded corners to be visible without a border   It s worth noting that some older browsers don t like putting border-radius on tables table cells  It may be worth putting a  lt div gt  inside each cell and styling that instead  However this shouldn t affect current versions of any browsers  except IE  that doesn t support rounded corners at all - see below   Finally  not that IE doesn t support border-radius at all  IE9 beta does  but most IE users will be on IE8 or less   If you want to hack IE to support border-radius  look at http   css3pie com    EDIT   Okay  this was bugging me  so I ve done some testing   Here s a JSFiddle example I ve been playing with  It seems like the critical thing you were missing was border-collapse separate  on the table element  This stops the cells from linking their borders together  which allows them to pick up the border radius   Hope that helps

User · Answer

Sample HTML   lt table class  round-corner  aria-describedby  caption  gt       lt caption id  caption  gt Table with rounded corners lt  caption gt       lt thead gt           lt tr gt               lt th scope  col  gt Head1 lt  th gt               lt th scope  col  gt Head2 lt  th gt               lt th scope  col  gt Head3 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td scope  rowgroup  gt tbody1 row1 lt  td gt               lt td scope  rowgroup  gt tbody1 row1 lt  td gt               lt td scope  rowgroup  gt tbody1 row1 lt  td gt           lt  tr gt           lt tr gt               lt td scope  rowgroup  gt tbody1 row2 lt  td gt               lt td scope  rowgroup  gt tbody1 row2 lt  td gt               lt td scope  rowgroup  gt tbody1 row2 lt  td gt           lt  tr gt       lt  tbody gt       lt tbody gt           lt tr gt               lt td scope  rowgroup  gt tbody2 row1 lt  td gt               lt td scope  rowgroup  gt tbody2 row1 lt  td gt               lt td scope  rowgroup  gt tbody2 row1 lt  td gt           lt  tr gt           lt tr gt               lt td scope  rowgroup  gt tbody2 row2 lt  td gt               lt td scope  rowgroup  gt tbody2 row2 lt  td gt               lt td scope  rowgroup  gt tbody2 row2 lt  td gt           lt  tr gt       lt  tbody gt       lt tbody gt           lt tr gt               lt td scope  rowgroup  gt tbody3 row1 lt  td gt               lt td scope  rowgroup  gt tbody3 row1 lt  td gt               lt td scope  rowgroup  gt tbody3 row1 lt  td gt           lt  tr gt           lt tr gt               lt td scope  rowgroup  gt tbody3 row2 lt  td gt               lt td scope  rowgroup  gt tbody3 row2 lt  td gt               lt td scope  rowgroup  gt tbody3 row2 lt  td gt           lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt               lt td scope  col  gt Foot lt  td gt               lt td scope  col  gt Foot lt  td gt               lt td scope  col  gt Foot lt  td gt           lt  tr gt       lt  tfoot gt   lt  table gt    SCSS  easily converted to CSS  use sassmeister com     General CSS table  th  td       border  1px solid  000      padding  8px 12px      round-corner       border-collapse  collapse      border-style  hidden      box-shadow  0 0 0 1px  000     fake  border      border-radius  4px          Maybe there s no THEAD after the caption      caption   tbody           tr first-child               td first-child              th first-child                   border-top-left-radius  4px                             td last-child              th last-child                   border-top-right-radius  4px                  border-right  none                                     tbody first-child           tr first-child               td first-child              th first-child                   border-top-left-radius  4px                             td last-child              th last-child                   border-top-right-radius  4px                  border-right  none                                     tbody last-child           tr last-child               td first-child              th first-child                   border-bottom-left-radius  4px                             td last-child              th last-child                   border-bottom-right-radius  4px                  border-right  none                                     thead           tr last-child               td first-child              th first-child                   border-top-left-radius  4px                             td last-child              th last-child                   border-top-right-radius  4px                  border-right  none                                     tfoot           tr last-child               td first-child              th first-child                   border-bottom-left-radius  4px                             td last-child              th last-child                   border-bottom-right-radius  4px                  border-right  none                                        Reset tables inside table     table tr th      table tr td           border-radius  0            http   jsfiddle net MuTLY xqrgo466

User · Answer

Add a  lt div gt  wrapper around the table  and apply the following CSS   border-radius  x px  overflow  hidden  display  inline-block    to this wrapper

User · Answer

You can try this if you want the rounded corners on each side of the table without touching the cells   http   jsfiddle net 7veZQ 3983    lt table gt       lt tr class  first-line  gt  lt td gt A lt  td gt  lt td gt B lt  td gt  lt  tr gt       lt tr class  last-line  gt  lt td gt C lt  td gt  lt td gt D lt  td gt  lt  tr gt   lt  table gt

User · Answer

It is a little rough  but here is something I put together that is comprised entirely of CSS and HTML    Outer corners rounded Header row Multiple data rows   This example also makes use of the  hover pseudo class for each data cell  lt td gt   Elements can be easily updated to meet your needs  and the hover can quickly be disabled    However  I have not yet gotten the  hover to properly work for full rows  lt tr gt   The last hovered row does not display with rounded corners on the bottom  I m sure there is something simple that is getting overlooked     x000D   x000D  table dltrc   x000D    width  95   x000D    border-collapse  separate  x000D    border-spacing  0px  x000D    border  solid black 2px  x000D    border-radius  8px  x000D    x000D   x000D  tr dlheader   x000D    text-align  center  x000D    font-weight  bold  x000D    border-left  solid black 1px  x000D    padding  2px x000D    x000D   x000D  td dlheader   x000D    background   d9d9d9  x000D    text-align  center  x000D    font-weight  bold  x000D    border-left  solid black 1px  x000D    border-radius  0px  x000D    padding  2px x000D    x000D   x000D  tr dlinfo  x000D  td dlinfo   x000D    text-align  center  x000D    border-left  solid black 1px  x000D    border-top  solid black 1px  x000D    padding  2px x000D    x000D   x000D  td dlinfo first-child  x000D  td dlheader first-child   x000D    border-left  none  x000D    x000D   x000D  td dlheader first-child   x000D    border-radius  5px 0 0 0  x000D    x000D   x000D  td dlheader last-child   x000D    border-radius  0 5px 0 0  x000D    x000D   x000D   x000D          hover effects         x000D   x000D   x000D    tr hover01 hover  x000D  tr hover02 hover   x000D    background-color   dde6ee  x000D      x000D   x000D   x000D         ROW HOVER        x000D   x000D   x000D    tr hover02 hover last-child   x000D    background-color   dde6ee  x000D    border-radius  0 0 6px 6px  x000D        x000D   x000D   x000D         CELL HOVER        x000D   x000D  td hover01 hover   x000D    background-color   dde6ee  x000D    x000D   x000D  td hover02 hover   x000D    background-color   dde6ee  x000D    x000D   x000D  td hover02 first-child   x000D    border-radius  0 0 0 6px  x000D    x000D   x000D  td hover02 last-child   x000D    border-radius  0 0 6px 0  x000D    x000D   lt body style  background white  gt  x000D     lt br gt  x000D     lt center gt  x000D       lt table class  dltrc  style  background none  gt  x000D         lt tbody gt  x000D           lt tr class  dlheader  gt  x000D             lt td class  dlheader  gt Subject lt  td gt  x000D             lt td class  dlheader  gt Title lt  td gt  x000D             lt td class  dlheader  gt Format lt  td gt  x000D           lt  tr gt  x000D           lt tr class  dlinfo hover01  gt  x000D             lt td class  dlinfo hover01  gt One lt  td gt  x000D             lt td class  dlinfo hover01  gt Two lt  td gt  x000D             lt td class  dlinfo hover01  gt Three lt  td gt  x000D           lt  tr gt  x000D           lt tr class  dlinfo hover01  gt  x000D             lt td class  dlinfo hover01  gt Four lt  td gt  x000D             lt td class  dlinfo hover01  gt Five lt  td gt  x000D             lt td class  dlinfo hover01  gt Six lt  td gt  x000D           lt  tr gt  x000D           lt tr class  dlinfo hover01  gt  x000D             lt td class  dlinfo hover01  gt Seven lt  td gt  x000D             lt td class  dlinfo hover01  gt Eight lt  td gt  x000D             lt td class  dlinfo hover01  gt Nine lt  td gt  x000D           lt  tr gt  x000D           lt tr class  dlinfo2 hover02  gt  x000D             lt td class  dlinfo hover02  gt Ten lt  td gt  x000D             lt td class  dlinfo hover01  gt Eleven lt  td gt  x000D             lt td class  dlinfo hover02  gt Twelve lt  td gt  x000D           lt  tr gt  x000D         lt  tbody gt  x000D       lt  table gt  x000D     lt  center gt  x000D   lt  body gt  x000D   x000D   x000D

[html] Rounded table corners CSS only

The answer is

Lesson in Table Borders...

Examples related to html

Examples related to css

Examples related to html-table

Examples related to rounded-corners

Tags