<img style="display: none" src="https://nerdy.dev/media/squircle.jpg" alt="An example squircle" height="500" width="500" />
 Squircles with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape"><code>clip-path: shape()</code></a>, while we wait for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape"><code>corner-shape: squircle</code></a>.
<a href="https://github.com/web-platform-tests/interop/issues/1048">Vote for <code>corner-shape</code> in Interop 2026</a> or give <a href="https://codepen.io/ZoranJambor/pen/xbZxbaR">this little GUI</a> a peep from <a href="https://www.youtube.com/@CSSWeekly">Zoran</a>.
<a href="https://codepen.io/argyleink/pen/zxGyJgm">Try on Codepen</a>

Squircles with clip-path: shape(), while we wait for corner-shape: squircle. Vote for corner-shape in Interop 2026 or give this little GUI a peep from Zoran. Try on Codepen

Squircles with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape" rel="noopener noreferrer">clip-path: shape()</a>, while we wait for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape" rel="noopener noreferrer">corner-shape: squircle</a>.
<a href="https://github.com/web-platform-tests/interop/issues/1048" rel="noopener noreferrer">Vote for corner-shape in Interop 2026</a> or give <a href="https://codepen.io/ZoranJambor/pen/xbZxbaR" rel="noopener noreferrer">this little GUI</a> a peep from <a href="https://www.youtube.com/@CSSWeekly" rel="noopener noreferrer">Zoran</a>.
<a href="https://codepen.io/argyleink/pen/zxGyJgm" rel="noopener noreferrer">Try on Codepen</a>

Squircles

RSS Feed for Adam Argyle: Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.

RSS Feed for Adam Argyle: Web design &amp; development tips &amp; tricks: CSS, JS, HTML, Design, &amp; UX.

Share Squircles

Sign up to save your podcasts

Squircles

Squircles