Border Radius & Squircle — Learning Bundle
This guide separates three ideas. They're standard CSS border-radius, draft corner-shape: squircle, and other squircle-like shapes or platform masks. The bundle is not one standard design term.
Another example
A design-system engineer tests a 24 px border-radius fallback. Supported browsers also get the draft squircle corner. The notes call the app-icon mask a separate platform asset. It doesn't prove the CSS keyword is used.
Main parts
- 01Content surface
- 02Distinct visual treatment
- 03Action and readability check
Use it when
Use this guide to choose and record corner shapes, browser support, and fallback behavior. It also separates web corners from custom or platform shapes.
Do not use it when
Not every rounded rectangle is a squircle. A large radius isn't the draft CSS value. Never ship an experimental corner without testing its fallback and clipping.
Name used in code
border-radius + @supports (corner-shape: squircle) Before you ship
Check that every member concept has its own name and link. Show all members in the same situation. Give a visible rule for when each one applies and which groups are valid. Never present the bundle as one canonical pattern or as parts that can be swapped freely.
Outcome: Use Border Radius & Squircle — Learning Bundle to compare its member concepts. Keep their boundaries clear, then decide which members apply and which can work together. User context: A design-system engineer tests a 24 px border-radius fallback. Supported browsers also get the draft squircle corner. The notes call the app-icon mask a separate platform asset. It doesn't prove the CSS keyword is used. Learning bundle to unpack: Border Radius & Squircle — Learning Bundle. Canonical members: CSS Border Radius, CSS Squircle Corner Why this comparison helps: Use this guide to choose and record corner shapes, browser support, and fallback behavior. It also separates web corners from custom or platform shapes. Do not treat the bundle as one pattern when: Not every rounded rectangle is a squircle. A large radius isn't the draft CSS value. Never ship an experimental corner without testing its fallback and clipping. Comparison requirements: Name every member concept on its own. Explain its job and limits. Show every member in the same real situation. Give a visible sign for when to use, combine, or leave out each member. Decision quality: Keep platform and evidence limits clear. Show which members can work together. Point out false matches, unsafe swaps, and cases that need another concept. Acceptance criteria: A reader can explain each member in one sentence and tell them apart in the example. They can defend the chosen member or valid group and open every canonical guide. Evidence and limits (evidence boundary): This is not a normative standard. Its name, limits, and expected behavior can change from one source to another. Unknowns to confirm: Target platform, decision setting, limits, and evidence needed to use, combine, or leave out members.
Check this request
Review the current use of Border Radius & Squircle — Learning Bundle. Definition: This guide separates three ideas. They're standard CSS border-radius, draft corner-shape: squircle, and other squircle-like shapes or platform masks. The bundle is not one standard design term. Release checks: Check that every member concept has its own name and link. Show all members in the same situation. Give a visible rule for when each one applies and which groups are valid. Never present the bundle as one canonical pattern or as parts that can be swapped freely. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.