I'm trying to set a border-radius for a th element.

table.spreadsheet th.left {
  border-top-left-radius: 1em 1em;
}

<table class="spreadsheet">
 <thead>
  <tr>
   <th class="left">test</th>
  </tr>
 </thead>
</table>

It doesn't seem to work.


The same concept works for a div element.

This works for me if I put a border on the table cell:

table.spreadsheet th.left {
      background: aqua;
      border: solid black thin;
      border-top-left-radius: 1em 1em;
}

Might be some conflicting styles then.
If I render the content that I would send to prince, I can see the radius properly though.
I tried to add the same styles you just pasted, I see them properly in browser, I see the color and border properly in prince, but no radius (radius ok in browser)

I confirm that I have some conflicting styles.
I'm overriding few things for the pdf version, and somehow this override is being picked up properly by the browser and not in prince.