[RaisedButton] Rounded corners are not rounded.

[olegshilov]

Hello. I encountered the following problem. Rounded corners on rised button do not appear rounded.

How can I fix this?

[jkruder]

@olegshilov What browser are you seeing this in?

[olegshilov]

@jkruder

• Chrome 43.0.2357.132 (64-bit)
• Firefox 39.0
• Safari 8.0.7 (10600.7.12)

[jkruder]

@olegshilov It should be working...you're using the latest versions of the browsers. Are you applying any custom styling/overriding the theme?

[olegshilov]

@jkruder yes, I use a custom theme and override styles with style={{width: '100%'}}

[jkruder]

Can you try your app without the style={width: '100%'}}? I just replicated on the demo site and it's very difficult to tell that there are rounded corners when the width is set to 100%. If you see rounded corners without the width we know that there is no issue with the stock buttons.

[olegshilov]

@jkruder I have another button without 100% width and it look the same.

[jkruder]

The button is definitely rounded. The border-radius is only at 2px. I think it's just difficult to see the radius with the dark colors. If you zoom in on the image you just sent you can see the border radius.

[hai-cea]

@olegshilov How are you setting the button's background color?

[olegshilov]

@hai-cea Through a custom theme

[hai-cea]

Here's some of my research:

Your Colors
Retina

Non-Retina

Same button colors - Different background color
Retina

Non-Retina

I did notice that the buttons look fine on the theme customization page:
On Theme customization page
Retina

Non-Retina

After some digging I traced it back to a background color of white being set in the default theme:
https://github.com/callemall/material-ui/blob/master/src/styles/themes/light-theme.js#L98

I'll put in a fix for this.

[olegshilov]

@hai-cea Thanks.