The Squircle Obsession: Inside the Neuroscience of Round Corners
Why Your Brain Secretly Hates Sharp Corners (And Why Modern UI Went Soft)
When I first started building for the web, everything was a box. Literally.
We laid out entire websites using rigid HTML <table> tags and flat <div> containers. If you wanted a rounded corner in 2008, you had to slice up tiny background .png files in Photoshop, write messy CSS hacks, or run entire JavaScript polyfills just to curve a single border. Early browsers and web standards were never built to render organic, fluid geometry out of the box; they were built to display formatted text and square blocks of content.
Naturally, the moment CSS3 dropped border-radius: 8px;, the entire industry went wild.
Over the last few years, however, that gentle rounding exploded into something much more aggressive. Open Spotify, boot up macOS, or open Figma: nearly every container, pill, chip, and card looks aggressively soft. At first, I rolled my eyes and assumed it was just another fleeting design fad. I started slapping heavier radii onto my components by pure habit — simply because it looked modern and everyone else was doing it.
Then my curiosity got the better of me: Is there an actual, rational reason why software is melting its edges, or are we all just copying Apple’s homework?
I went down a rabbit hole of cognitive neuroscience, infant behavior studies, and differential geometry. What I found blew my mind. There isn’t just a name for this specific geometric obsession — the Squircle — there is a deep biological and mathematical blueprint explaining why our brains crave it.
Here is what is actually happening under the hood of your visual cortex, and why understanding it completely changed how I design interfaces.
1. The Amygdala Test: Why Sharp Points Stress Us Out
To understand why curved interfaces feel comfortable, you have to look at the oldest, most paranoid part of your brain: the amygdala.
The amygdala is your biological smoke detector. Its entire job is survival — scanning the environment for hazards and triggering a fight-or-flight alert before you even have time to consciously think.
In neuroimaging studies where researchers placed people in fMRI scanners and showed them everyday objects, a striking pattern emerged: neutral objects with sharp, angular contours triggered significantly higher bilateral amygdala activation than the exact same objects rendered with curved edges.
The visual cortex extracts what scientists call low spatial frequencies — the quick, blurry outline of a shape — in a fraction of a millisecond. If that outline has sharp spikes, your brain instantly flags it as a potential hazard.
This isn’t learned behavior from watching minimalist tech keynotes. Developmental psychologists at the Max Planck Institute tested infants between 8 and 18 months old with various plants and physical objects. Even babies who had never been pricked by a thorn showed immediate behavioral reluctance to touch pointed edges, instinctively pulling their hands back.
The takeaway for UI: Sharp 90-degree corners are a relic of screen hardware, not human biology. When your user lands on a screen packed with razor-sharp borders, their primitive brain has to do extra subconscious legwork just to feel at ease. Curves signal physical safety.
2. Saccadic Load: How Your Eyes Read a Card
Safety is only half the equation; the other half is cognitive ergonomics — how your eyes physically move across a screen.
When you look at an object, your eye doesn’t glide across it like a smooth camera dolly. It jumps in rapid, jerky movements called saccades, pausing briefly at points of interest (fixations) so your fovea can process visual detail.
Think of it like driving a go-kart:
- A sharp rectangle is a track with four brutal right-angle hairpins. Your eye dashes along the top edge, hits a hard corner, stops, re-orients 90 degrees, dashes down the side, stops again, and repeats. That requires four distinct mental braking operations just to figure out where the box begins and ends.
- A rounded boundary is a smooth, banked turn. The eye sweeps effortlessly along the perimeter in one continuous motion.
When you have a screen featuring a complex dashboard, multiple bento-grid cards, and nested modals, rounding the corners drastically cuts down visual friction. It allows the user’s eyes to chunk information into neat visual “islands” without getting snagged on the corners.
3. The Math: A Rounded Rectangle Is an Optical Lie
Now for the plot twist. Most designers assume that making something “round” just means turning up the border-radius slider.
Get Wil Murillo’s stories in your inbox
Join Medium for free to get updates from this writer.
Technically, a standard rounded rectangle is a geometric hack. It consists of a dead-straight flat line that instantly collides with a segment of a perfect circle.
In mathematics, this is known as Tangent Continuity (or G¹ continuity):
- Along the straight edge, the curvature is zero (flat).
- The instant the line touches the circular arc, the curvature abruptly jumps to a fixed value.
That sudden mathematical jump creates an optical defect called a “tangency pop” or a visual kink. If you look closely at a basic CSS rounded button, you can often pinpoint the exact seam where the straight line turns into a curve. It looks slightly pinched — like someone jammed a circular cap onto a shoebox.
Enter the Squircle (specifically, the Superellipse).
In 1959, Danish mathematician and poet Piet Hein was tasked with designing a massive roundabout in Stockholm’s city center. The city planners were stuck: a classic rectangle maximized usable real estate but choked traffic; a circle eased traffic flow but wasted precious architectural space.
Hein solved it by inventing a hybrid mathematical curve that bridged the gap between a rectangle and an ellipse:
When n = 2.5, something magical happens. The shape maintains Curvature Continuity (G² continuity).
Instead of jumping abruptly from flat to round, the curvature starts at zero and ramps up gradually, peaks at the corner apex, and smoothly ramps back down to zero. There is no seam. There is no kink. The bend looks completely organic — like a river stone smoothed by thousands of years of running water or an aerodynamic sports car panel.
When Apple overhauled iOS 7, they threw out standard circular rounded rectangles and adopted Hein’s superellipse geometry across every single app icon and hardware enclosure. They knew that on high-density Retina displays, your eye subconsciously registers the tangent pop of a G¹ corner as visual noise. A G² squircle feels seamless, unified, and undeniably premium.
4. What This Means for Product Builders
Understanding the math and neuroscience behind the squircle transformed how I approach interface architecture. It moved me away from “doing it because it looks clean” to using curvature as a functional dial.
If you’re building digital products today, here is the playbook:
- Match Curvature to Intentionality: Curvature communicates approachable comfort; hard lines communicate clinical precision. High-speed, high-density professional tools (think Bloomberg Terminals, code editors, audio DAWs) legitimately benefit from sharper geometries because straight boundaries pack maximum data into minimal screen real estate. But for consumer software, navigation, and core interaction cards, curved boundaries actively reduce cognitive fatigue.
- Watch Out for the “CSS Trap”: Figma gives you a native Corner Smoothing slider (which defaults to around 60% for an iOS squircle). But beware: your standard CSS
border-radiuscannot render a true $G^2$ continuous squircle—it only produces standard $G^1$ circular arcs. If you want true curvature continuity on the web, you need to implement SVG path clipping or specialized CSS houdini/clip-path libraries. Don’t blame your frontend engineer if the live site looks slightly stiffer than your Figma canvas unless you've budgeted for that implementation detail. - Avoid the Bubble-Wrap Extreme: There is a dark side to over-rounding. When radii become excessively ballooned, interior padding explodes, content density collapses, and the interface starts looking like an infant toy rather than a professional tool. Curvature should guide the fovea to the content inside the container, not overpower it.
The web didn’t leave its square era behind because rounded edges were trendy. It evolved because our tools finally caught up to our biology. When you curve a corner with mathematical continuity, you aren’t just decorating — you’re speaking the native language of the human visual system.
Sources:
- Circling the Square: Designing with “Squircles” Instead of Rounded Rectangles https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/
- Construction of G2 planar Hermite interpolants with prescribed arc lengths — Usiena air https://doi.org/10.1016/j.amc.2022.127092
- Every rose has its thorn: Infants’ responses to pointed shapes in naturalistic contexts — MPG.PuRe https://doi.org/10.1016/j.evolhumbehav.2018.06.001
- How Apple Uses Squircles in iOS Design https://squircle.js.org/blog
- Rounded Corners and Why They Are Here to Stay — Designmodo https://designmodo.com/rounded-corners/
- Squircle vs Rounded Rectangle: What’s the Difference? https://squircle.js.org/blog
- Superegg — Wikipedia https://en.wikipedia.org/wiki/Superegg
- The “Superellipse”: a curve that lies between the ellipse and the rectangle. — Piet Hein https://piethein.com/superellipse/
- Visual elements of subjective preference modulate amygdala activation — Cognitive and Affective Neuroscience Lab https://doi.org/10.1016/j.neuropsychologia.2007.03.008
- Why Rounded Corners Dominate UI Trends — Digital Kulture — Webbb.ai https://www.webbb.ai/blog
