According to the CSS specification, the border-radius property only applies to block-level elements, and table or tr elements are not considered block-level :(

Many of the suggested solutions work just fine, but I'd like to suggest wrapping the table in a container element (e.g., div) and apply the border radius to the wrapper.

<div class="my-table-wrapper">
  <table class="my-table">
    <!--  -->
  </table>
</div>

.my-table-wrapper {
  border-collapse: separate;
  border-radius: 4px;
  border: 1px solid #F1F1F1;
  overflow: hidden;
}

.my-table {
  border-spacing: 0;
  border-collapse: separate;
}