I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

🌐
W3Schools
w3schools.com › cssref › css3_pr_border-radius.php
CSS border-radius property
The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements! This property can have from one to four values.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › border-radius
border-radius - CSS | MDN
October 13, 2025 - The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Discussions

html - The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners? - Stack Overflow
I am trying to make a table with rounded corners using the CSS border-radius property. The table styles I'm using look something like this: table { -moz-border-radius: 10px; -webkit-border-... More on stackoverflow.com
🌐 stackoverflow.com
css - How to add a border radius on a table row? - Stack Overflow
The tr element does honor the border-radius. Can use pure html and css, no javascript. More on stackoverflow.com
🌐 stackoverflow.com
[Help] Add border radius to background image
You can add border-radius to the body, though the html tag will inherit the body's background unless you set it there otherwise: html { background: #FFFFFF; } body { background: url(...); border-radius: 30px; } More on reddit.com
🌐 r/css
11
6
February 26, 2015
How to make a fancy inverted border radius in CSS
I am always fascinated by how creative some people get with CSS and here I am, struggling to center a button *sigh* More on reddit.com
🌐 r/css
10
44
January 18, 2019
🌐
W3Schools
w3schools.com › css › css3_borders.asp
CSS Rounded Corners
The CSS border-radius property is used to create rounded corners for elements.
🌐
Fandom
htmlcss.fandom.com › wiki › Border-radius
Border-radius | HTML & CSS Wiki - Fandom
JavaScript is disabled in your browser · Please enable JavaScript to proceed · A required part of this site couldn’t load. This may be due to a browser extension, network issues, or browser settings. Please check your connection, disable any ad blockers, or try using a different browser
🌐
CSS-Tricks
css-tricks.com › almanac › properties › b › border-radius
border-radius | CSS-Tricks
November 10, 2022 - You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn’t have to be perfectly circular, it can be elliptical. This is done using a slash (/) between two values: .element { border-radius: 10px / 30px; /* horizontal radius / vertical radius */ }
🌐
Tailwind CSS
tailwindcss.com › docs › border-radius
border-radius - Borders - Tailwind CSS
Use utilities like rounded-s-md and rounded-se-xl to set the border radius using logical properties, which map to the appropriate corners based on the text direction:
🌐
Programiz
programiz.com › css › border-radius
CSS border-radius Property (With Examples)
CSS border-radius property is used to define the round corners for the element's border.
Find elsewhere
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › border-top-left-radius
border-top-left-radius - CSS - MDN Web Docs - Mozilla
/* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; /* Global values */ border-top-left-radius: inherit; border-top-left-radius: initial; border-top-left-radius: revert; border-top-left-radius: revert-layer; border-top-left-radius: unset;
🌐
W3Schools
w3schools.com › cssref › css3_pr_border-top-left-radius.php
CSS border-top-left-radius property
The border-top-left-radius property defines the radius of the top-left corner. Tip: This property allows you to add rounded borders to elements!
🌐
Michael Gearon
mgearon.com › css › border-radius
CSS border-radius complete property guide | Rounded Corners
November 30, 2022 - How to round corners of images, buttons and borders in CSS using the border-radius property. We can round each corner or together using shorthand values.
🌐
GeeksforGeeks
geeksforgeeks.org › css › css-border-radius-property
CSS border-radius Property - GeeksforGeeks
July 11, 2025 - The border-radius: 35px; value rounds all four corners of the green box uniformly, giving it smooth, curved edges. The element is styled with padding, a fixed width, and height, along with centered text.
🌐
Bootstrap
getbootstrap.com › docs › 4.0 › utilities › borders
Borders · Bootstrap
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
🌐
CSS { In Real Life }
css-irl.info › logical-border-radius
CSS { In Real Life } | Logical Border Radius
December 15, 2022 - The logical properties for border radius refer to the start and/or end of the inline or block axis. Of all the logical properties, they’re perhaps the most confusing to read. Let’s compare defining the top left, top right, bottom right and bottom left radii, and their logical property equivalents: div { border-top-left-radius: 5rem; border-top-right-radius: 2rem; border-bottom-right-radius: 4rem; border-bottom-left-radius: 3rem; } /* With logical properties: */ div { border-start-start-radius: 5rem; border-start-end-radius: 2rem; border-end-end-radius: 4rem; border-end-start-radius: 3rem; }
Top answer
1 of 16
384

You can only apply a border-radius to a td, not a tr or a 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>

You can see it in action on JSFiddle too.

2 of 16
97

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; 
}
🌐
W3Schools
w3schools.com › css › css_border_rounded.asp
CSS Rounded Borders
All the top border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.
🌐
QuirksMode
quirksmode.org › css › backgrounds-borders › borderradius.html
CSS3 - border-radius
div.test { border: 1px solid black; padding: 10px; position: relative; border-radius: 20px; border-bottom-right-radius: 0; }
🌐
W3Schools
w3schools.com › css › tryit.asp
The border-radius Property
The W3Schools online code editor allows you to edit code and view the result in your browser