[css-anchor-position] Matching the anchor's `border-radius`, `background`, etc

[mayank99]

Problem and use case

Currently, the anchor-size() function allows an anchor-positioned element to match the anchor element's dimensions. It would be useful to have the ability to match more than just dimensions, e.g. shape and other visuals.

The two properties that I'm particularly interested in include:

• border-radius
• background (or at least color-scheme)

These are not difficult to match manually for one-off elements, but sometimes I want to build a highly-adaptive anchor-positioned element which needs to work with many different anchors (all of which may have different visuals). My current use-case is anchored focus rings (see CodePen demo).

API ideas

Could anchor-size() be extended to include border-radius?

If not, maybe this could be exposed as a new function for shape-related properties? (What other properties would be desirable to match? corner-shape?)

border-radius: anchor-shape();

More ambitious: what if there was a more generic function to match any arbitrary properties?

background-color: anchor-property(background-color);

If there are concerns with matching all 500+ properties, maybe we could start with just custom properties?

border-radius: anchor-property(--border-radius);