How to add border radius on table row

by

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;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

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; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Be sure to provide all the vendor prefixes. You can see it in action on JSFiddle too.

More Related Contents:

  1. Detect the type of font that is displayed in an image [closed]
  2. Transitions on the CSS display property
  3. How to use HTML to print header and footer on every printed page of a document?
  4. Responsive css background images
  5. Any way to declare a size/partial border to a box?
  6. Add a CSS border on hover without moving the element [duplicate]
  7. How to prevent long words from breaking my div?
  8. Scrolling a flexbox with overflowing content
  9. Font Awesome 5 – why aren’t icons like bitcoin, facebook, twitter showing?
  10. CSS Page-Break Not Working in all Browsers
  11. Does css hover work on mobile devices?
  12. What’s the difference between CSS classes .foo.bar (without space) and .foo .bar (with space) [duplicate]
  13. My CSS is not getting injected through my content script
  14. CSS Styling Checkboxes
  15. Pressed selector
  16. Float:right reverses order of spans
  17. Two divs, one fixed width, the other, the rest
  18. Bootstrap dropdowns menus appearing behind other elements – IE7
  19. Responsive css styles on mobile devices ONLY
  20. CSS: Top vs Margin-top
  21. How to make borders collapse (on a div)?
  22. React native text going off my screen, refusing to wrap. What to do?
  23. Can I add color to bootstrap icons only using CSS?
  24. Change style of pseudo elements in angular2
  25. CSS select multiple descendants of another element
  26. Select all ‘tr’ except the first one
  27. CSS shorthand vs longhand?
  28. How to make a Bootstrap 4 full width dropdown in Navbar?
  29. Why doesn’t my child element inherit color from its parent when parent has more specific selector?
  30. Stacking DIVs on top of each other?

Leave a Comment