ion-button element has no left and right border when using fill=outline and expand=full

Ionic version: [x] 4.11.5

I’m submitting a … [x] bug report [ ] feature request

Current behavior: When I use ion-button with the combination of attributes expand with value full and fill with value outline it results in a button with the left and right border of width 0 due to this CSS lines that apply to the ion-button shadow element:

:host(.button-full:not(.button-round)) .button-native { border-right-width: 0px; border-left-width: 0px; border-radius: 0px; } The button-outline class should also be excluded from this selection.

Expected behaviour: The outlined button should have the left and right border.

Steps to reproduce: Use the code: <ion-button expand="full" fill="outline">The sad button</ion-button>

[adonig]

@brandyscarney Thank you! I didn’t know about --border-radius. I tried to set border-radius: 0, realized that I’m dealing with a web component’s shadow DOM and went with the other solution 🙂

[ionitron-bot[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.