Why doesn't my border radius transition using tailwind apply?

I have a tailwind project with a super simple search field so far. When this search field is selected I want the border radius to decrease (make it more square like), apply a color, and some other small things. The transition seems to work for everything except the border-radius.

My markup looks like this:

<input
    type="text" 
    className="transition-border duration-500 rounded-full bg-secondary-neutral pl-4 pr-14 py-2 outline-0 focus:border focus:border-accent-neutral focus:rounded-sm focus:bg-white focus:shadow-primary-extra-light focus:shadow-md text-sm text-ellipsis w-full max-w-sm"
    placeholder="Søk etter produkter, merker og mer"
/>

I've also added this to my tailwind config to get border transition:

transitionProperty: {
    'border': 'border,border-radius,box-shadow,background-color',
},

The relevant generated css for the input field looks like this:

.duration-500 {
    transition-duration: 500ms;
}
.transition-border {
    transition-property: border,border-radius,box-shadow,background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

What am I missing to get the animation on the border radius as well?