How do I add a border radius to a table row?

How do I add a border radius to a table row?


  1. table { border-collapse: separate; border-spacing: 0; }
  2. td {
  3. border: solid 1px #000;
  4. border-style: none solid solid none;
  5. padding: 10px;
  6. }
  7. tr:first-child td:first-child { border-top-left-radius: 10px; }
  8. tr:first-child td:last-child { border-top-right-radius: 10px; }

How do I add a margin to a row in a table?

You cannot give margin to the table row. you can either give border-colapse and border spacing to the table or give border to table row and change its color to table background color.

How do you make a TR border in CSS?

If you want to add a border only to the bottom of the table row, you can apply the CSS border-bottom property to


that are placed within a


How do you put a border radius on a table in CSS?

CSS Rounded Corners

  1. Tip: This property allows you to add rounded corners to elements!
  2. Four values – border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Is it possible to insert a table within another table?

Yes, table can be inserted into cell of another table. Yes, but there must be no border in second table.

How do you set a border on TR?

You can use the box-shadow property to fake a border of a tr element. Adjust Y position of box-shadow (below represented as 2px) to adjust thickness. and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!

How to add border radius on table row?

The easiest way to add border radius to a table element that accepts border as a property, is doing border radius with overflow: hidden. I would Suggest you use .less instead, change your .css file to .less and use the following code: Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.

How to cancel out border radius in CSS?

I’ve tried using border-collapse to do this, but this cancels out the border-radius on the overall table, making the header row rounded on the top 2 corners but inside a squared off table. This is quite difficult to explain so an example can be found here. You can see the white border between the table and the row with the blue background.

How to have a border on just the table header?

These are the styles I have; the border-collapse style negates the border-bottom. When I remove the border-collapse, the border-bottom works. This answer utilizes border:collapse; plus margin and border on your element that you have in your table cells to provide the pseudo cell borders.

How do you add border radius in Firefox?

(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).