borderRadius style property not rounding the edges in reactjs

Question

<table className="table table-striped table-bordered" style={{'borderRadius':'5px'}}>
  <tbody>
      {data}
  </tbody>
</table>

I want the edges of the table to be rounded, but the above style is not working at all. Is there a way to do this ?

Answer 1

Based on the discussion in comments, it seems like one of the classes is overriding the inline style. The only way this could happen is if either of those classes is using !important to ensure that their style values take precedence over the inline values.

Keeping that in mind, I tried adding !important to the inline style:

<div className="no-borderRadiusImportant" style={{border: '1px solid black',borderRadius: '5px!important'}}>Hello, world!</div>

With CSS:

.no-borderRadiusImportant {
  border-radius: 0px !important;
}

It doesn't work. And based on the discussion here, the issue has not been fixed yet.

So here's the solution I would suggest:

Create another class that merely adds an !important border radius for you. Here's how you could do it:

<div className="no-borderRadiusImportant border-radiusImportant">Hello, world!</div>

With CSS,

 .border-radiusImportant{
   border-radius: 5px !important;
 }

Here's a fiddle for various scenarios related to this.

Original

<table className="table table-striped table-bordered" style='border-radius:5px;'>
  <tbody>
      {data}
  </tbody>
</table>

You don't need to set the border radius dynamically, if it is a constant value!