Can I set the border-radius for Raised Button?

Question

I've tried to set the border-radius like this :

const styles = {
   btn:{
         height: 30,
         fontSize: 11,
         borderRadius: 50
   }
}

It didn't work. I've read the documentation but can't find the answer.

Answer 1

Update (June 2020)

With the newer versions of material-ui, there no need for both props style and buttonStyle only style will be enough also, RaisedButton has been dropped with the migration from 0.x to 1.x being replaced now by variant="contained". Here is a modern version of the code in the original answer

<Button variant="contained" color="secondary" style={{ borderRadius: 50 }}/>

https://codesandbox.io/s/rounded-raised-button-w86o8?file=/index.js:0-361

Original Answer (April 2018)

This works for me

 <RaisedButton secondary buttonStyle={{ borderRadius: 50 }} style={{borderRadius:50}}>FF</RaisedButton>

Give both the style and buttonStyle. style covers the parent div inline styles

https://codesandbox.io/s/7o39499v9x

Answer 2

for mui v5 you do it with the sx property:

<Button sx={{ borderRadius: 12.5 }} />

The borderRadius properties multiples the value it receives by the theme.shape.borderRadius.

const theme = createTheme({
  shape: {
    borderRadius: 2,    // defaults to 4
  },
  palette: {...},
});