bug: ion-segment-button border-radius can't be changed.

[BerkeAras]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

The border-radius of ion-segment-button cannot changed using --border-radius.

Expected behavior:

The border-radius should be changing.

Steps to reproduce:

Use --border-radius on ion-segment-button.

[liamdebeasi]

Thanks for the issue. It looks like in MD mode, the ion-segment-button needs overflow: hidden applied in order for the border radius to work.

I need to check and see if this is expected. cc @brandyscarney

[brandyscarney]

Hello! I'm not able to see the problem with the border-radius, how can I reproduce?

https://codepen.io/brandyscarney/pen/ZEbVbae

[brandyscarney]

After further discussion with @liamdebeasi, it seems the ripple effect not applying the proper border-radius may be the issue? If that's the case, overflow: hidden could be applied to the ion-segment-button, but this will break the indicator animation. We would recommend removing the indicator transition if this is the desired effect.

I updated the Codepen above with more examples, but it would be helpful to know what the end result is that you're looking for. Could you please attach pictures of how you want the segment to look, or if one of the above solutions would work? Thank you!

[BerkeAras]

@brandyscarney I am sorry, it was my mistake and it works. Everything is now perfect for my project. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.