[Card]: Individual borderRadius values are not correct

[HarlesPilter]

Problem

When assigning individual borderRadius values, then they are not applied correctly. For example
borderRaidus={{top: false, right: true, bottom: true, left: false}}

Examples and information

Project

Terviseportaal

[airikej]

I think this object shape is ambiguous and hard to reason about.
For example, if I set top: false but right: true, what should the expected outcome be?

In CSS terms, border radius is defined per corner (top-left, top-right, etc.). Setting top: false would naturally imply that both top-left and top-right should have border-radius: 0. In that case, it’s unclear what right: true is supposed to represent or override.

Because of this mismatch between “sides” and how CSS actually works, the API becomes difficult to predict.

Wouldn’t it be clearer and less ambiguous to define the prop per corner instead, for example:

borderRadius?: false | {
  topLeft?: boolean;
  topRight?: boolean;
  bottomRight?: boolean;
  bottomLeft?: boolean;
};

This would map directly to CSS behavior and make combinations explicit and predictable.