How to change react-select tag border radius

Question

I'm trying to override react-select styles to achieve rounded multiValue tags.

So I went ahead and edited the multiValue style attribute like this:

const customStyles = {
    multiValue: (styles) => ({
        ...styles,
        backgroundColor: blue,
        borderRadius: "50%",
    }),
}

The background color works perfectly and the tag becomes blue. However the border radius is always stuck at 2px...

<Select
    options={options}
    styles={customStyles}
    isMulti
/>

How to override the default 2px border-radius imposed by react-select

Answer 1

It turned out that I was overriding the background color of the multiValueLabel, which was somehow hiding the overridden border-radius in multiValue. Removing the backgroundColor attribute from the multiValueLabel solved the issue.