1. Home
  2. Forums Index
  3. Browser Side / CSS 11:48 pm May 20, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Can't get rounded corners to work on tables

Either old corners bleed through, or not centered, or first row is offset

         

MichaelBluejay

9:26 pm on Mar 23, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm having a hair-pulling cross-browser problem that's reminding me of all the time I spent trying to get things to look the same on all browsers around 15 years ago. We've made so much progress, and it's been years since I had to deal with something like this, but here we go again.

I'm trying to round the top-left and top-right of a table. I've tried various approaches, but each has a fatal flaw, such as:

* The first row is offset in Firefox
* Table not centered, or
* Corners are rounded, but square corner borders also show in Firefox

Sample HTML: 

<table>
 <tr>
 <td colspan=3>Horked Tables Company</th>
 </tr>
 <tr>
 <td>Firefox</td>
 <td>crap</td>
 <td>still</td>
 </tr>
 <tr>
 <td>Safari</td>
 <td>OMG</td>
 <td>kittens</td>
 </tr>
</table>


This results in the first row being offset in Firefox: 
table {
 border-collapse: collapse;
 margin:auto; 
 font: 13px Arial;
}

td {
 padding: 10px;
 border: solid 1px gray;
 background: wheat;
}

tr:first-child td {
 border-radius:12px 12px 0px 0px;
 border: none;
 text-align:center;
 background:black; color:orange;
 font:18px Arial; font-weight:bold;
}


This fixes the offset problem, but then the corners aren't rounded. 
table {
 border-collapse: collapse;
 margin:auto; 
 font: 13px Arial;

 border-radius:12px 12px 0px 0px;
}

td {
 padding: 10px;
 border: solid 1px gray;
 background: wheat;
}

tr:first-child td {
 text-align:center;
 background:black; color:orange;
 font:18px Arial; font-weight:bold;
}



Adding "overflow:hidden" to the <table> definition rounds the corners, but the square corners bleed through. I can add "border:none" to the <td> definition, but then I'm back to the first problem, that the first row is offset in Firefox. 
table {
 border-collapse: collapse;
 margin:auto; 
 font: 13px Arial;

 overflow:hidden;
 border-radius:12px 12px 0px 0px;
}


Adding "display:inline-block" to the <table> definition fixes the corners, but then the table isn't centered. ("display:block" and "display:inline" don't work, either.) I could wrap the whole table in a <div style="text-align:center">, but dude. 
table {
 border-collapse: collapse;
 margin:auto; 
 font: 13px Arial;

 overflow:hidden;
 display:inline-block;
 border-radius:12px 12px 0px 0px;
}


Do I just have to either accept the offset, or wrap the table in a <div> to center it? Or is there some solution that doesn't require doubling the code?

NickMNS

12:54 am on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There is a small typo in you html.

Your header row starts as a <td> tag but closes as a </th>. It should be <th></th> and then in your css tr:first-child td can simply be th, but you will have to add padding:10px; to it.

Unfortunately I don't think this solves the problem you are describing.

NickMNS

1:11 am on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm stumped!

The best I could is this: 

table {
 border-collapse: collapse;
 margin:auto; 
 font: 13px Arial;
}

td {
 padding:10px;
 border: solid 1px gray;
 background: wheat;
}

th {
 padding: 10px;
 border-radius:12px 12px 0px 0px;
 border: solid 1px #fff;
 border-bottom: solid 1px #000;
 text-align:center;
 background:black; color:orange;
 font:18px Arial; font-weight:bold;
}


I set the border color to the same as the background (white), and then set the bottom-border color to black. Like this it centers the top row. The borders of the rows below still sticks out, but at least it is centered.

[jsfiddle.net...]

not2easy

2:59 am on Mar 24, 2018 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I used border-collapse on the th element to get rid of the box around it: 
th {
 padding: 10px;
 border-collapse:collapse;
 border-radius:12px 12px 0 0;
 border-bottom:solid 1px #000;
 text-align:center;
 background:black; color:orange;
 font:18px Arial; font-weight:bold;
}


MichaelBluejay

5:05 am on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks guys for giving this a shot.

It's not convenient for me to use <th>, because my WYSIWYG editor doesn't automatically generate those. I could go in and tinker with the HTML by hand, but that's cumbersome and I'd prefer not to.

In any event, even if I used <th>, adding border-collapse to it still seems to result in the first row being offset in Firefox.

Anyway, if someone had jumped in with an easy answer then I would have felt dumb for missing something obvious. So I guess there's a silver lining to their being no solution (so far). Though, if I could choose, I think I'd rather feel dumb and have my pages look proper in Firefox without having to wrap my tables in a <DIV> rather than feel not so dumb...

tangor

7:24 am on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



These are visual aspects. Nice for the eyes but not required for TABLE DATA. Me? I keep it simple. A Table is a Table and corners are corners, usually square. What's inside is more important than what's outside.

Don't over-think things. Border=0 can solve a lot of problems in a hurry.

Different point of graphics designer view...

birdbrain

11:51 am on Mar 24, 2018 (gmt 0)



Hi there MichaelBluejay,
here is a very simple solution to your dilemma... 


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
  background-color: #f0f0f0;
  font: 100% / 160% arial, helvetica, sans-serif;
  text-align: center;
 }

#table-container {
  display: inline-block;
  border-radius: 0.75em 0.75em 0 0;
  box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.3 );
  overflow: hidden;
 }

table {
   margin: auto; 
   border-collapse: collapse;
   font-size: 0.8em; 
 }

td {
  padding: 0.625em;
  border: 1px solid #808080; 
  background: #f5deb3;
  text-align: left;
 }

 th {
  padding: 0.625em;
  border: 1px solid #000;
  background-color: #000; 
  font-size: 1.4em ; 
  color: #ffa500;
 }
</style>

</head>
<body>
 
<div id="table-container">
  <table>
   <thead>
     <tr>
      <th colspan="3">Horked Tables Company</th>
     </tr>
   </thead>
   <tbody>
     <tr>
      <td>Firefox</td>
      <td>crap</td>
      <td>still</td>
     </tr><tr>
      <td>Safari</td>
      <td>OMG</td>
      <td>kittens</td>
     </tr>
   </tbody>
  </table>
<!-- #table-container --></div>

</body>
</html>


birdbrain

NickMNS

2:04 pm on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@Birdbrain

Nice, I knew that a wrapper(container) would solve it, but I was missing the overflow:hidden; when I tried it.

Note: the table is being centered by text-align:center; in the <body> styling. This may not be desirable as it will impact many other elements on the page. To overcome this you can simply wrap the table-container div in another div and then style it with the styling of the body tag.

MichaelBluejay

9:09 pm on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks, Birdbrain. I'm afraid I wouldn't count that as a solution because, like I said, I can already get it to work by wrapping the table in a DIV. I'm looking for a table-only solution. It looks like there isn't one...if I want it to work in Firefox.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:48 pm May 20, 2026