Corner Perfector

About this plugin

Stop guessing the inner radius! 📐

Achieving the perfect "nested card" look requires math. If your outer container has a radius of 24px and padding of 16px, your inner container shouldn't be 24px. It must be 8px (Outer Radius - Padding).

Corner Perfector handles this math for you instantly, creating visually harmonious and mathematically correct interfaces.

Key Features:

⚡️ Concentric Corner Automation:

Automatically calculates the correct inner border-radius ($R_{inner} = R_{outer} - Padding$).

🎨 Real-time Interactive UI: Adjust padding, radius, and dimensions with sliders and see the result instantly in a live preview window.

🏗️ Dual Mode Support: Create "Simple Frames" (manual constraints) or robust "Auto Layout" stacks with a single click.

🌈 Progressive Lightening: Automatically adjusts the fill color of inner layers to create depth (lighter colors for inner layers).

📏 Advanced Measurement: Toggle visual guides to see exact pixel values for widths, heights, and curves.

🍏 iOS Smoothing: Optional 60% corner smoothing for that premium Apple-style super-ellipse look.

📐 Unit Conversion: Work in px, %, rem, or em.

How to use:

Select a Frame or open the plugin to start fresh.

Adjust the Outer Radius and Padding using the sliders.

Watch the "Inner Radius" calculate automatically in the preview.

Click Create Auto Layout or Simple Frame to generate the perfect structure on your canvas.