I was recently trying to fix the focused styling for textfields in our company design system (https://github.com/PaackEng/paack-ui), and ran into this issue where I wasn't able to update the border width as per the design for the focused state.

So elm-ui lets you specify attributes for the focused state, but these have the type "decorative" attr (apparently the decorative label has something to do with the ephemeral styles).

Unfortunately, border width property has the type attr. After banging my head for a while I realized a good hack - instead of setting the border width for the focused state, I just ended up setting an explicit shadow:

shadow { color = Colors.navyBlue700, offset = ( 0, 0 ), blur = 0, size = 1.2 }

Works perfectly !!!