Apply border-radius to control buttons

[nagix]

This PR applies the correct border radius to control buttons with hover effects. Currently, it is only applied to the button with a focus.

Before:

After:

Launch Checklist

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• manually test the debug page
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Apply border-radius to control buttons</changelog>

[CLAassistant]

All committers have signed the CLA.

[ryanhamley]

Under what conditions are you seeing this? Is it browser-specific? I can't reproduce the images above. #8520 should take care of this issue. This is what I see when I hover on the zoom buttons with a focus.

[nagix]

Sorry, I didn't tell that in the images above, I intentionally increased the opacity of the hover effect to highlight the problem (using rgba(0, 0, 0, 0.5) instead of the original rgba(0, 0, 0, 0.05)). #8520 only fixed the shape with a focus, not hovering.

[ryanhamley]

Looks great! Thanks for catching this.