title: Border collapse with rounded edges?
body: <p>I am trying to render a React table that has no borders but has rounded edges. I tried using <code>border-collapse: collapse</code>, which removed the borders that were appearing between columns in the table, but it also removed the border-radius property I had set. Does anyone have an idea as to how to accomplish this?</p>
  
  <p>Here is how I am styling the table. Note I do not specify borders anywhere, but they are still appearing.</p>
  
  <pre><code>moduleSection {
      border-radius: 4px;
      background-color: #fff;
  }
  </code></pre>
  
  <p>And here is how I create the table in my JS file:</p>
  
  <pre><code>renderRow = (item) =&gt; {
      return (
          &lt;tr key={item.id}&gt;
              &lt;td&gt;
                  {item.name}
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      {item.status}
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  }
  
  render() {
          const items = this.props.items;
  
          return (
              &lt;table className={styles.moduleSection}&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;
                              &lt;div&gt;
                                  Your Items
                              &lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div&gt;
                                  Item Status
                              &lt;/div&gt;
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;{items.map(this.renderRow)}&lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  </code></pre>