`border` shorthand handling is buggy

[ty-v1]

🐛 Bug Report

I cannot use more than one theme value in the border shorthand property.

related to #28

To Reproduce

• ✅ border: 1px solid red complies to border: 1px solid red
• ❌ border: 10 solid red compiles to border: 10 solid red;
• ❌ border: 1px solid blue-500 compiles to border: 1px solid blue-500

Expected behavior

• border: 10 solid red should compile to border: 10px solid red;
• border: 1px solid blue-500 should compile to border: 1px solid #3b82f6

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

CodeSandbox

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 13.4
 - CPU: (8) arm64 Apple M1
 - Memory: 83.31 MB / 16.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
 - Yarn: 1.22.19 - /opt/homebrew/bin/yarn
 - npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
## npmPackages:
 - @xstyled/styled-components: 3.8.0 => 3.8.0
 - styled-components: 5.3.9 => 5.3.9

[ty-v1]

It seems like I should avoid to use the border shorthand.

https://github.com/styled-components/xstyled/issues/326#issuecomment-970490869