Rounded Corners Are Not Just Aesthetic. Research Shows They Change How Users Perceive Content.
Rounded corners in user interface design are not just a visual trend. The preference for them over sharp corners has been documented in perceptual psychology research and informs design decisions at companies whose interface choices are studied more carefully than almost any other product decisions in software.
The relationship between corner shape and perceived mood has been studied since at least the 1920s, when gestalt psychologists documented that angular forms are perceived as more dynamic or threatening than curved forms, which read as softer, safer, and more approachable. This perceptual difference between shapes is not cultural. It appears consistently across cultures and appears to be connected to how the human visual system processes potential threats in the environment.
Understanding the research behind the preference, the history of how rounded corners came to dominate consumer software, and what the CSS border-radius property actually can do beyond its most basic form gives a more complete picture of why this seemingly minor CSS property shows up in discussions of product design and interface psychology.
The Perceptual Psychology of Rounded Corners
The gestalt psychology tradition, which emerged in Germany in the early twentieth century through the work of Max Wertheimer, Kurt Koffka, and Wolfgang Kohler, documented several consistent principles of visual perception. One of them concerned the perception of sharp versus curved forms. Angular shapes with sharp points and acute corners were consistently associated by subjects with threat, urgency, and aggression. Curved and rounded shapes were associated with safety, friendliness, and comfort.
A neurological basis for this pattern was proposed by Moshe Bar and Maital Neta of Harvard Medical School in Psychological Science in 2006. Their fMRI study showed that viewing sharp-featured objects activated the amygdala more than viewing curved versions of the same objects, even when subjects reported no conscious preference. The authors proposed that sharp contours trigger a low-level threat signal because sharp objects in nature represent genuine physical hazards.
A 2013 paper by Lars-Erik Janlert and Erik Stolterman, published in the ACM SIGCHI Conference on Human Factors in Computing Systems, applied this framework directly to user interface design. Subjects evaluated UI components that varied in corner radius while holding all other variables constant. Components with greater curvature were rated as more friendly, more approachable, and less formal. The researchers concluded that corner radius is a meaningful variable in shaping users' initial impressions of an interface, independent of content.
How Apple Standardized Rounded Corners in Software
The original Macintosh operating system in 1984 used rounded rectangles extensively. Steve Jobs has been cited in Walter Isaacson's biography as having insisted on rounded rectangles for the Mac's interface because he found sharp-cornered rectangles aesthetically uncomfortable. Jef Raskin, the designer who conceived the Macintosh project, independently favored rounded rectangles, and the choice was reinforced by Andy Hertzfeld and the rest of the early Mac team.
Bill Atkinson, the Macintosh engineer who wrote the QuickDraw graphics library, implemented a DrawRoundRect routine that drew rounded rectangles efficiently on the Mac's 68000 processor. Atkinson has described Jobs taking him outside the Apple offices and pointing out rounded rectangles in the physical environment, including car windows, building signs, and street signage, to emphasize that they were natural and ubiquitous rather than arbitrary aesthetic choices.
When Apple introduced the original iPhone in 2007, the entire touchscreen interface built on the rounded rectangle as the primary element. Buttons, cells, navigation bars, and content cards all used consistent border radii across the interface. This consistency created a visual language that was coherent and warm rather than clinical. Competitors gradually adopted similar corner rounding as it became clear that the iPhone's interface conventions were influencing user expectations.
Android's early interface used sharper, more angular elements. The Material Design language introduced by Google in 2014 initially preserved relatively sharp corners but later editions of Material Design progressively increased the prominence of rounded corners. Material You, released with Android 12 in 2021, made large corner radii a defining visual characteristic of the design system, with the specific recommendation of 16dp for most containers.
What CSS Border-Radius Actually Does
The CSS border-radius property was drafted as part of the CSS Backgrounds and Borders Module Level 3 specification. Early vendor-prefix versions appeared in Firefox as -moz-border-radius, in Safari and Chrome as -webkit-border-radius, and were widely used from around 2007 onward. The unprefixed standard property became fully cross-browser supported with Internet Explorer 9 in 2011, which was the last major holdout.
Before CSS border-radius, creating rounded corners on web elements required using images. The standard technique was the sliding doors method, developed by Douglas Bowman of Wired magazine in 2003: four small corner images, placed using CSS positioning and background-position tricks, with the element's background color or image filling the interior. A change to the corner radius required regenerating and replacing all four images. The border-radius property collapsed this into a single value.
The basic form, border-radius: 8px, applies an identical circular arc to all four corners. The property accepts up to four space-separated values specifying corners individually in clockwise order: top-left, top-right, bottom-right, bottom-left. A value of border-radius: 4px 8px 12px 16px would produce a progressively increasing corner radius going clockwise.
The slash notation is the least commonly understood capability of the property. border-radius: 80px / 40px specifies separate horizontal and vertical radii for the corner curve, producing an elliptical arc rather than a circular one. This allows creating leaf shapes, tear-drop forms, and other asymmetric curves that cannot be produced with circular arcs alone. The full eight-value form, two groups of four values separated by a slash, specifies independent horizontal and vertical radii for all four corners simultaneously.
Circles, Pills, and Squircles
A border-radius value of 50% applied to a square element produces a circle, because the arc's radius equals half the element's dimensions in both directions, creating a continuously curving boundary with no straight edges. Applied to a non-square rectangle, 50% produces an ellipse.
A value of 9999px or another very large number on a rectangular element produces the pill shape: the short sides become fully rounded while the long sides remain straight, because the arc radius is capped at the element's half-height before it can curve the long sides. Pill-shaped buttons, toggle switches, and badges are produced this way rather than with a precisely measured radius.
Apple uses a variant called a squircle, based on the mathematical concept of a superellipse, for iOS and macOS app icons. A superellipse was first described by Gabriel Lame, a French mathematician, in 1818, and popularized for design purposes by Danish architect and poet Piet Hein in 1959. Unlike a circle's constant curvature, a superellipse starts with low curvature near the corner that gradually increases to maximum curvature at the edge's midpoint, then decreases symmetrically. The result looks similar to a rounded rectangle but has a smoother, less abrupt transition from flat side to curve.
CSS border-radius produces circular arcs that transition abruptly from flat to curved. This subtle difference is why app icons placed on an iPhone home screen look slightly smoother at their corners than the same icons with a CSS border-radius applied to a square image, even when the apparent corner size looks similar. Several open-source SVG implementations of the superellipse exist for web developers who need true squircle shapes, but they require either inline SVG or a clip-path approach rather than the border-radius property.
Corner-Specific Control in Practice
The four-value flexibility of CSS border-radius is underused in practice. Most CSS code uses a single value, rounding all corners equally. The cases where per-corner control produces better results include modal dialogs that appear from a screen edge, where only the opposite corners should be rounded and the side that meets the edge should remain square. Tab elements benefit from rounding only the top two corners when the tab connects to content below it. Dropdown menus typically use no rounding on the top corners when they open immediately below a button, but round the bottom two corners.
Conclusion
Card components in content grids where cards stack against the viewport edges need asymmetric rounding to avoid a visual gap between the card's square edge and the viewport boundary. These details do not appear in tutorials focused on the basic property syntax, but they affect the cohesion of a complete interface.
A border radius generator that allows independent control of each corner and provides real-time preview makes these design decisions visible before writing any code.
Frequently Asked Questions
Does border-radius affect how users perceive an interface?
Research by Janlert and Stolterman (ACM SIGCHI 2013) found that higher corner curvature makes UI elements feel more friendly and approachable, while sharp corners feel more formal or aggressive.
What is a squircle and how is it different from border-radius?
A squircle (superellipse) has curvature that starts gradually near the corner and peaks at the midpoint. CSS border-radius uses uniform circular arcs. Apple's iOS app icons use squircles, which look subtly smoother.
How do you make a circle or pill shape with border-radius?
Use border-radius: 50% on a square element to get a circle, or on a rectangle to get an ellipse. Use a very large value like 9999px on a rectangle to get a pill shape.