Border color & inputs work differently with CSS vars

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Using border color utility classes with inputs works differently since the adding of CSS vars for border colors (see https://github.com/twbs/bootstrap/commit/de0dfca9a1749990319cdfcbb7f1584df09d7091).

This issue was Initially spotted by @louismaximepiton.

Before

1. Go to https://getbootstrap.com/docs/5.1/forms/form-control/
2. Add .border-danger to the first input in the page
3. Result: the border is now red

Now (main branch)

1. Go to https://twbs-bootstrap.netlify.app/docs/5.1/forms/form-control/
2. Add .border-danger to the first input in the page
3. Result: the border stays gray

because .border-danger value is --bs-border-color: rgba(--var(--bs-danger-rgb), var(--bs-border-opacity)); and .form-control border: 1px solid #ced4da;. .form-control border doesn't use the CSS var so doesn't change the color.

4. Add .border as well
5. Result: the border is now red

because by adding .border the border will use the color defined in the CSS var and will override the border color specific to the form control.

Is it expected?

I'm not sure this is an issue to fix or if it is expected. But if it is expected, we should maybe mention it in the Migration page because some projects could observe a regression since adding a .border was not mandatory before.

What operating system(s) are you seeing the problem on?

Windows, macOS

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.2.0 (current main branch)