28 lines
1.1 KiB
CSS
28 lines
1.1 KiB
CSS
/* Default smooth corner curvature. Inside the support guard, corners use
|
|
* superellipse(1.5) — between a circular arc (round = superellipse(1)) and a
|
|
* squircle (superellipse(2)) — instead of the default arc. Engines without
|
|
* corner-shape keep circular corners because the token and the rule exist
|
|
* only inside the guard.
|
|
*
|
|
* corner-shape does not inherit, so the universal selector applies the token
|
|
* to elements and their ::before/::after; other pseudo-elements (for example
|
|
* the ::-webkit-scrollbar parts) stay circular.
|
|
*
|
|
* Full-round shapes opt out where they are declared: a superellipse deforms a
|
|
* circle into a squircle and squares off capsule ends, so every effectively
|
|
* uncapped radius (50%, 100%, or a pill radius far above the box size) pairs
|
|
* `corner-shape: round` with its `border-radius` in the owning component
|
|
* sheet. The corner-shape stylesheet spec enforces that pairing.
|
|
* Component-specific curve rules are documented in docs/ui-radius.md. */
|
|
@supports (corner-shape: superellipse(1.5)) {
|
|
:root {
|
|
--dsw-corner-shape: superellipse(1.5);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
corner-shape: var(--dsw-corner-shape);
|
|
}
|
|
}
|