How to Inspect and Debug CSS corner-shape Squircle Borders in Safari Web Inspector

Modern Apple user interface design across iOS, iPadOS, and macOS is renowned for its organic, smooth curvature known as the “squircle” (a Lamé curve or superellipse). Unlike standard circular corner radii produced by traditional border-radius—which create an abrupt curvature transition where the straight edge meets the circular arc (tangent G1 continuity)—squircles maintain continuous curvature (G2 continuity). In the CSS Borders and Backgrounds Module Level 4 specification, this capability is standardised via the corner-shape property. Supported in modern WebKit and Safari, developers can inspect, test, and debug native superellipse borders directly in Safari Web Inspector without resorting to heavy SVG masks or custom canvas clips.

Understanding corner-shape Values and Superellipse Geometry

The corner-shape property dictates the geometric profile applied across corners defined by border-radius. While border-radius defines the dimensional extent of the corner curve, corner-shape dictates the mathematical curve equation:

• round: The default W3C behaviour. Corners are drawn using quarter-circle or quarter-ellipse arcs.
• squircle: Generates continuous, superelliptical corner transitions that eliminate optical pinch points, matching the native aesthetic of Apple app icons and hardware silhouettes.
• angle: Straightens the corner into a 45-degree chamfered edge (bevelled corner).
• scoop: Inverts the corner curve into an inward concave notch.

Basic Syntax and Pairing with border-radius

To produce a squircle container in CSS, pair a standard border-radius with corner-shape: squircle:

/* Styling an iOS-style squircle app card or button */
.app-card {
    width: 200px;
    height: 200px;
    background-color: #f2f2f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 44px;
    corner-shape: squircle;
    overflow: hidden;
}

The property accepts independent values for all four corners (e.g. corner-shape: squircle round squircle round;) following standard four-value box-model shorthand.

Inspecting and Testing corner-shape in Safari Web Inspector

To inspect and verify how Safari renders squircle shapes in real time:

1. Launch Safari and navigate to your web project.
2. Right-click the target element and select Inspect Element to open Safari Web Inspector.
3. In the Elements DOM tree, click the node to inspect.
4. In the right-hand panel, select the Styles tab. Locate your CSS rule and confirm that corner-shape: squircle; is active without invalid property warnings or strikethroughs.
5. Navigate to the Computed tab to verify that the WebKit rendering engine has successfully computed the property and bound it to the element’s border geometry.

Debugging Clipping and Overflow with Squircles

When embedding child images or backgrounds inside a squircle element, standard rectangular clipping will cause visual bleeding if the parent’s overflow rules are not properly synchronised. In Safari:

1. Verify that the parent element includes overflow: hidden; or overflow: clip;.
2. Ensure child elements (such as <img> tags) do not specify independent border-radius declarations that conflict with the parent’s superellipse curve.
3. If hardware-accelerated transforms cause child content to bleed over corners during animations, apply isolation: isolate; or transform: translateZ(0); on the parent container to force layer flattening within WebKit’s compositor.

Providing Progressive Enhancement with @supports

Because non-WebKit browsers and legacy browser releases may not yet support corner-shape, employ feature queries to ensure visual consistency across all platforms:

/* Standard fallback for older or non-supporting browsers */
.interactive-pill {
    padding: 12px 24px;
    background-color: #007aff;
    color: #ffffff;
    border-radius: 20px;
    transition: transform 0.2s ease;
}

/* Progressive enhancement for modern Safari and WebKit */
@supports (corner-shape: squircle) {
    .interactive-pill {
        border-radius: 28px;
        corner-shape: squircle;
    }
}

Browsers lacking corner-shape support will seamlessly display standard rounded rectangles, while Safari delivers refined continuous superellipse curvature.

Auditing Box Shadows and Outlines on Squircle Containers

In Safari, box-shadow and outline automatically conform to the mathematical contour defined by corner-shape:

.squircle-elevation {
    border-radius: 36px;
    corner-shape: squircle;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

Inspect the computed shadow boundary in the Web Inspector’s Graphics pane to verify that the drop shadow projects smoothly along the superellipse curve rather than creating harsh circular halos.