8
<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 ?

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
ssss
  • 551
  • 3
  • 5
  • 14
  • any reason you arent just putting `style="border-radius: 5px;"`? – Daniel A. White Jul 31 '17 at 16:41
  • @DanielA.White He's probably using some templating engine – J. Chen Jul 31 '17 at 16:41
  • @J.Chen But there is no need to call {{}} for inline style, he is not loading it from variable – noitse Jul 31 '17 at 16:45
  • @DanielA.White, it's react js – ssss Jul 31 '17 at 16:46
  • Then you are doing it wrong, why not do it like this const divBorderRadius= {border-radius: '5px'} Then call it inside table , style={divBorderRadius}, Another thing to check if you are overriding your css in some other file. Inspect through browser – noitse Jul 31 '17 at 16:56
  • @noits, already tried that :), didnt work – ssss Jul 31 '17 at 16:58
  • Then 100% your css is being overwritten from other classes, inspect it – noitse Jul 31 '17 at 16:59
  • @noitse, ive been looking for that bug for an hour now, how could i find what exactly is overwriting it ? – ssss Jul 31 '17 at 17:23
  • It is an inline style, so only a value with `!important` can override it. Try changing the value to `5px !important` and it should definitely work. I will update my answer with that as well. – Nisarg Shah Jul 31 '17 at 17:47
  • Also, this seems to be of relevance: https://stackoverflow.com/a/20903465/5894241 – Nisarg Shah Jul 31 '17 at 18:11

7 Answers7

8

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!

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
  • Just to be sure, have you applied `border: '1px solid black'` before applying the border-radius? Because you won't get border radius without the border (generally). Or if you have a background or box-shadow, that's okay too.. – Nisarg Shah Jul 31 '17 at 17:02
5

You're missing the crucial overflow: hidden.

Without this crucial piece, the content overflowing from your table won't show the rounded corners.

<table style={{borderRadius: '5px', overflow: 'hidden'}}>
  <tbody>
      {data}
  </tbody>
</table>
Dharman
  • 30,962
  • 25
  • 85
  • 135
HawaiiFi
  • 103
  • 2
  • 6
4

Try this code:

You don't need the quotes.

https://facebook.github.io/react/tips/inline-styles.html

<table className="table table-striped table-bordered" style={{borderRadius: '5px'}}>
  <tbody>
      {data}
  </tbody>
</table>
Chandra Kumar
  • 4,127
  • 1
  • 17
  • 25
2

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'units'}} when using JSX

style={{borderRadius: 5 + 'px'}}
Mick Lasocki
  • 139
  • 1
  • 1
  • 9
1

Try adding another borderCollapse: 'collapsed' to your style object along with your borderRadius: '5px'.

https://www.w3schools.com/cssref/pr_border-collapse.asp

chenghw
  • 11
  • 1
1

you can use like below

borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number
rajesh kumar
  • 1,578
  • 16
  • 14
0

I faced this same issue, if you use the Box component, you will be able to fix it. See the material ui link for more details https://material-ui.com/pt/system/borders/

import Box from '@material-ui/core/Box';
...
<Box borderRadius="50%"/>
  enter your component here
Rudson Rodrigues
  • 345
  • 4
  • 23