# Framer Update: Squircle Source: https://www.youtube.com/watch?v=VPFLRgz8jW0 Recap page: https://rapidrecap.app/video/VPFLRgz8jW0 Generated: 2025-12-10T16:11:37.032+00:00 --- ## Quick Overview Framer introduced the 'Squircle' CSS property, a powerful new feature demonstrated through styling buttons with variable radii and smooth cornering, which can also be applied to other layout elements and components like links and form inputs, offering advanced, reusable, and consistent visual design capabilities across projects. **Key Points:** - The video introduces the new 'Squircle' CSS property in Framer, designed to create smooth, rounded corners similar to Apple's iOS app icons (00:32). - The presenter modifies two buttons, adjusting the 'Radius' and 'Squircle' properties in the Styles panel to achieve the desired rounded effect (00:09-00:27). - The 'Squircle' property is shown to be a component variable that can be linked, allowing for consistent application across multiple elements, such as buttons and cards (01:15-01:38). - The presenter demonstrates linking the 'Radius' and 'Squircle' properties to a variable within the 'Button Variables' editor (01:25-01:34). - The 'Squircle' property is supported in all Chromium-based browsers (Chrome, Edge) but is noted as experimental and not yet supported in Safari or Firefox (02:34-02:42). - The technique is also applied to other elements, including a form input field in a newsletter signup, showing its versatility beyond just buttons (02:20-02:28). - The video concludes by showing the technique successfully recreating the look of the macOS Shortcuts app icon using 3D transforms and masking within Framer (01:50-02:08). ![Screenshot at 00:05: demonstration of two rounded buttons, one white and one dark gray, created using the new corner styling options in Framer's properties panel.](https://ss.rapidrecap.app/screens/VPFLRgz8jW0/00-00-05.png) **Context:** The video, presented by Benjamin, showcases a new feature in the design tool Framer: the 'Squircle' CSS property. This property allows designers to easily apply complex, aesthetically pleasing corner rounding styles, often associated with modern operating system design languages like Apple's iOS, to various UI elements such as buttons, cards, and form inputs within a Framer project. ## Detailed Analysis Benjamin introduces the 'Squircle' property in Framer, a feature that allows for creating smooth, rounded corners reminiscent of iOS app icons. He begins by selecting two existing buttons in the design canvas and accessing the Styles panel on the right. Here, he adjusts the 'Radius' property and then selects the new 'Squircle' property, setting it to 50% to achieve a highly rounded, friendly look for both buttons (00:08-00:32). He emphasizes that this property allows for more nuanced corner treatment than standard radius settings. Next, he demonstrates how this feature can be used to create reusable components; he applies the same styling to card elements in a website layout, ensuring visual consistency (01:04-01:14). Furthermore, the video shows that the 'Squircle' property supports variables, allowing designers to control corner styles across instances centrally, as seen when editing button variables (01:15-01:34). The presenter also shows the application of this smooth rounding to native form inputs, specifically a newsletter email field (02:20-02:28). Finally, he showcases a complex example of recreating the macOS Shortcuts app icon, utilizing 3D transforms and masking alongside the 'Squircle' property for high-fidelity graphical recreation (01:50-02:08). Browser compatibility is noted: it works in Chromium-based browsers but is unsupported in Safari and Firefox. ### Button Styling with Squircle - Two rounded buttons ('Go' and 'Watch') are created and styled using the 'Radius' and 'Squircle' properties (50% set for the latter) (00:06-00:32) - Adjusting the 'Squircle' property dynamically creates smooth, non-circular corner rounding (00:26-00:31). ### Component Variables and Reusability - The 'Squircle' property can be defined as a variable within components, allowing changes to propagate across all instances (01:15-01:34) - This ensures that all buttons and layout elements maintain the same rounded aesthetic (01:35-01:47). ### Application Beyond Buttons - The feature is shown applied to card elements in a website layout to maintain a cohesive, fun feel (01:04-01:14) - It is also used on a native form input element for the newsletter signup (02:20-02:28). ### Advanced Graphic Recreation - The technique is used to accurately recreate the look of the macOS Shortcuts app icon using 3D transforms and masking in conjunction with 'Squircle' (01:50-02:08). ### Browser Support - The 'Squircle' property is currently supported in all Chromium-based browsers (Chrome, Edge) but is explicitly noted as not yet supported in Safari or Firefox (02:34-02:42). ![Screenshot at 00:00: Initial view showing two distinct button designs, a light 'Go' button and a dark 'Watch' button, both exhibiting significant corner rounding.](https://ss.rapidrecap.app/screens/VPFLRgz8jW0/00-00-00.png) ![Screenshot at 00:10: Selection of both buttons, indicating they are grouped or being modified simultaneously, with the properties panel open on the right.](https://ss.rapidrecap.app/screens/VPFLRgz8jW0/00-00-10.png) ![Screenshot at 00:16: The Styles section in the properties panel highlighting the 'Squircle' property being selected and set to 50% for the selected elements.](https://ss.rapidrecap.app/screens/VPFLRgz8jW0/00-00-16.png) ![Screenshot at 01:34: The design canvas showing a section of a webpage layout where card elements are being styled, demonstrating the application of the rounding style to more than just buttons.](https://ss.rapidrecap.app/screens/VPFLRgz8jW0/00-01-34.png) ![Screenshot at 02:01: Transition to a dark canvas displaying a highly detailed recreation of the macOS Shortcuts app icon, illustrating the advanced graphic capabilities enabled by the property.](https://ss.rapidrecap.app/screens/VPFLRgz8jW0/00-02-01.png)