A thick coloured border on a rounded element
- Forbidden
- A 2px or wider coloured outline around a card or button with a large radius
- Instead
- A hairline in
--color-stroke-weak, or no border and a surface step. If the element must stand out, change its surface, not its outline.
What this rule looks like
Why this rule
A heavy outline on a curve becomes the most visible shape in the element, and the eye traces it instead of reading what is inside.
- Kind
- Rule
- Section
- Things to avoid
- Group
- Generic-AI aesthetic
- Bucket
- hybrid
- Severity
- warning
- Detector
rounded-accent-border- Since
- v0.17.0