corner-shape.css 1.1 KB

1234567891011121314151617181920212223242526
  1. /* Smooth corner curvature for every rounded surface. Inside the support
  2. * guard, all corners curve along superellipse(1.5) — between a circular arc
  3. * (round = superellipse(1)) and a squircle (superellipse(2)) — instead of the
  4. * default arc; engines without corner-shape keep circular corners because the
  5. * token and the rule exist only inside the guard.
  6. *
  7. * corner-shape does not inherit, so the universal selector applies the token
  8. * to elements and their ::before/::after; other pseudo-elements (for example
  9. * the ::-webkit-scrollbar parts) stay circular.
  10. *
  11. * Full-round shapes opt out where they are declared: a superellipse deforms a
  12. * circle into a squircle and squares off capsule ends, so every effectively
  13. * uncapped radius (50%, 100%, or a pill radius far above the box size) pairs
  14. * `corner-shape: round` with its `border-radius` in the owning component
  15. * sheet. The corner-shape stylesheet spec enforces that pairing. */
  16. @supports (corner-shape: superellipse(1.5)) {
  17. :root {
  18. --dsw-corner-shape: superellipse(1.5);
  19. }
  20. *,
  21. *::before,
  22. *::after {
  23. corner-shape: var(--dsw-corner-shape);
  24. }
  25. }