borderRadius style property not rounding the edges in reactjs

user_7183779 0
Viewed 53713
<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 ?

reactjs css
7 Answers

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'}}
user_76063110

you can use like below

borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number
user_51269390

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>
user_45578080

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
user_89751650
Related