Popularised by Apple, used by almost everyone. A squircle is a geometric shape that blends the characteristics of a square and a circle. Mathematically, it's a specific case of a superellipse, a curve defined by an equation that allows for a smooth transition between angular and circular forms. At first glance, a squircle might look like a square with rounded corners, but if you observe closely, you'll notice that the entire perimeter flows in a continuous, rounded curve—not just the corners. This makes squircles amazing as they look more organically smooth and visually balanced than a typical rounded square. Squircles are often used in modern design, user interfaces, and product shapes (like smartphones and app icons) because they provide the structural presence of a square with the softness and elegance of a circle.
The Squircle Portal was made because we love squircles. They can really make a design feel much more premium and refined, but they're unfortunately not supported natively in many cases, CSS and HTML don't have a direct way of using mathematical expressions as element shapes. There hasn't been any practical squircle-related website—until now.
The Squircle Portal, or TSP for short is your ultimate resource for everything squircles. Here, you can read about the mathematical definitions of squircles and learn to create them yourself, or utilise our squircle generators that can output to SVG, CSS clip-path and more.