# Apple's corners

A glossy button whose corners are a superellipse that flows into the edge with no kink. Live at https://design.how/vault#squircle.

Install the skill, which carries the template, the brief and a check script:

```sh
npx skills add https://design.how/vault/squircle
```

## What it is

One small glossy button, 132 by 36, reading "Get the app" in a debossed near-black, centred on a pale grey plate. Its corners are the point. A border-radius is one circular arc per corner, and the arc meets the straight edge at a hard tangent, so curvature jumps from zero to its maximum in one step. Here each corner is a quarter of the superellipse |x|^n + |y|^n = 1 at n = 5, where curvature ramps in, so the corner eases into the edge.

The shape is an SVG path, built per size. At the default exponent each corner is a three-cubic fit of the superellipse on a unit box, scaled by the radius and rotated into place; any other exponent samples the curve in 32 segments. The radius is 0.42 of the element's height, so every control size gets the same corner, and smoothing scales how far the corner reaches along each edge, from 40 to 100 percent of the radius.

The path is applied as clip-path: path() to every layer of the surface, about eighteen near-transparent greyscale layers: a porcelain gradient, a corner vignette, a centre glow, fine grain, brushed streaks, a diagonal sweep, sheens top, middle and bottom, a glass rim, a grounding shadow, a fresnel edge and corner glints. The border is a gradient stroke on the same path, drawn at twice its width and clipped to the shape so only its inner half shows and the hairline stays even round the corner.

## How it works

- Measure the element, then build its path: straight edges between four corners, each three cubics from the unit-corner fit scaled by the effective radius and rotated 90 degrees per corner.
- Take the effective radius as min(radius, half the short side) times (0.4 + 0.6 smoothing); sample the arc in 32 lines when the exponent is not 5.
- Clip every gloss layer to the path with clip-path: path(), and paint the body as a clipped gradient div.
- Stroke the same path at twice the border width, clipped to itself, so only the inner half shows.
- Set the label as gradient-clipped text over a 2px blurred dark copy, with stacked drop shadows for the deboss.
- Under reduced motion, keep the button still when pressed.

## What you can change

- `radiusFor` (0.42 of the height): The corner radius for a control height.
- `SMOOTHING` (1): How far the corner reaches along each edge.
- `EXPONENT` (5): The superellipse exponent: 2 is a circle, higher is boxier.
- `BUTTON_W, CONTROL_H` (132, 36): The button's size in design pixels.
- `LABEL` ("Get the app"): The button text.
- `GROUND` (#f6f7f9): The plate colour.
- `FONT_VAR` (--visual-sans): The CSS variable holding the label's family.

Last updated: 2026-11-02