Created
December 3, 2025 07:27
-
-
Save rosmur/4dc0804c74a8f44d475a0742f42b9a4d to your computer and use it in GitHub Desktop.
Better pill shapes with superellipse()
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section> | |
| <button> | |
| <svg width="32" height="32" viewBox="0 0 24 24"> | |
| <path d="M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/> | |
| </svg> | |
| Rounded | |
| </button> | |
| <button class="squircle"> | |
| <svg width="32" height="32" viewBox="0 0 24 24"> | |
| <path fill="none" d="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9s-9-1.8-9-9s1.8-9 9-9"/> | |
| </svg> | |
| Squircled | |
| </button> | |
| <button class="superellipse"> | |
| <svg width="32" height="32" viewBox="0 0 24 24"> | |
| <path d="M12 6c4.41 0 8 2.69 8 6s-3.59 6-8 6s-8-2.69-8-6s3.59-6 8-6m0-2C6.5 4 2 7.58 2 12s4.5 8 10 8s10-3.58 10-8s-4.5-8-10-8"/> | |
| </svg> | |
| Superellipsed | |
| </button> | |
| </section> | |
| <p>Maybe <code>superellipse</code> also looks good as the inline code <code>corner-shape</code> too?</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "https://unpkg.com/open-props" layer(support.design-system); | |
| @import "https://unpkg.com/open-props/normalize.min.css" layer(support.demo); | |
| @import "https://unpkg.com/open-props/buttons.min.css" layer(support.demo); | |
| button { | |
| border-radius: 1e3px; | |
| &.squircle { | |
| corner-shape: squircle; | |
| } | |
| &.superellipse { | |
| corner-shape: superellipse(1.25); | |
| } | |
| } | |
| code { | |
| border-radius: 1e3px; | |
| corner-shape: superellipse(1.25); | |
| padding-inline: .3lh; | |
| padding-block: .1lh .2lh; | |
| @media (prefers-color-scheme: light) { | |
| background: white; | |
| border: .5px solid var(--surface-2); | |
| } | |
| } | |
| @layer support.demo { | |
| body { | |
| display: grid; | |
| place-content: center; | |
| padding: var(--size-5); | |
| gap: var(--size-10); | |
| } | |
| section { | |
| display: grid; | |
| place-content: center; | |
| place-items: center; | |
| gap: var(--size-3); | |
| } | |
| button { | |
| > svg { | |
| block-size: 1cap; | |
| inline-size: 1cap; | |
| > path { | |
| stroke-width: 5px; | |
| stroke: var(--text-2); | |
| } | |
| } | |
| } | |
| p { | |
| max-inline-size: 40ch; | |
| line-height: 2; | |
| text-wrap: pretty; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment