In one of my recent PCF controls, I decided to go “all-in” on Fluent UI v9 Theme Tokens.

The idea was simple – no hardcoded styles at all. Colors, font sizes, spacing, border radii – everything should come from the theme. This approach worked perfectly fine for most of the properties, and the control looked consistent with Model-Driven Apps UI.

Except for one thing – border radius.

Problem

For some reason, border radius was not applied at all.

What I saw during testing:

• Colors – working
• Font sizes – working
• Spacing – working
• Border radius – ignored

No matter what I tried, components always rendered with default Fluent styling. The interesting part – the moment I hardcoded something like “16px”, everything started to look exactly as expected.

At this point, it was clear that this was not a styling issue, but something deeper.

So I started digging into the theme object that comes from context.fluentDesignLanguage and noticed something unexpected – there were no border radius tokens at all.

This immediately reminded me of another issue I described a year ago – the problem was also related to what the platform actually provides vs what Fluent UI expects.

Solution

The fix is exactly the same pattern as in the previous post.

Instead of relying on the platform-provided Fluent theme, you need to take control of it.

Open your ControlManifest.Input.xml and comment out the Fluent dependency:

After that:

• Your control bundles its own Fluent UI
• Full set of tokens becomes available
• Border radius starts working as expected