Squircle
Give one component, or every component, a squircle shape with one class.
How it works
Add .zui-squircle to any element with a border radius. It works on inputs, textareas, selects, cards, dialogs, popovers, menus, badges, tabs, and more.
.zui-squircle {
@supports (corner-shape: squircle) {
corner-shape: superellipse(1.25);
border-radius: 20px;
}
}The class lives in the zui.utilities layer, so it wins over component radius styles. Browsers without corner-shape support keep the normal rounded corners.
Every component
Turn the switch off and on to compare the normal shape with the squircle shape. Squircles only show in browsers that support corner-shape, for example Chrome.
Collapsible
Collapsible content.
Accordion item one
Accordion content.
Accordion item two
Accordion content.
Squircle popover.
Squircles everywhere
Add .zui-squircle-all to a parent element. Every ZUI component inside it gets a squircle shape. Put it on <html> to make squircle the default shape for the whole site.
<html class="zui-squircle-all">This works in every framework, because it is only a class. In React, you do not need to pass shape="squircle" to each <Button>.
These components get the squircle shape: button, avatar, badge, card, input, textarea, select, checkbox, dialog, popover, menu, tooltip, kbd, accordion, collapsible, tabs, and the app shell menu toggle and skip link.
Radio buttons stay round on purpose.
Variants that are square or pill on purpose keep their shape:
- Any component with
shape="hard"orshape="soft" - Side and top/bottom dialog positions (drawers)
- Flush accordions
- Underline tabs
To use a different shape on one component, pass shape="hard" or shape="soft".
The shape prop
Most components also have a shape prop. Use it to set the shape of one component. Each component page has a Shape section with a demo.
| Component | Shapes | CSS class |
|---|---|---|
| Button, Avatar, Input, Select | default, hard, soft, squircle |
zui-{component}-shape-{name} |
| Textarea | default, hard, soft, squircle |
soft uses --radius-3xl, not a full pill |
| Badge, Kbd | default, hard, soft, squircle |
on a badge, soft looks the same as default |
| Tooltip, Tabs | default, hard, soft, squircle |
on the root (zui-tooltip, zui-tabs) |
| Menu | default, hard, squircle |
on the root (zui-menu) |
| Card, Dialog, Popover, Accordion, Collapsible | default, hard, squircle |
no soft: a pill shape does not suit large boxes |
Checkbox and radio have no shape prop. Inside zui-squircle-all, checkboxes get squircle corners and radios stay round.
Focus ring
Chrome draws the default focus ring (outline-style: auto) as a round ring outside the element, even on a squircle. So squircle shapes use a solid focus ring instead. It follows the squircle corners and sits in the same place as the ring on other shapes.
Usage
<input class="zui-input zui-squircle" />
<textarea class="zui-textarea zui-squircle"></textarea>
<select class="zui-select zui-squircle">…</select>
<div class="zui-card zui-squircle">…</div>In the framework wrappers, pass zui-squircle as the class (className in React):
<Input className="zui-squircle" />
<Card className="zui-squircle">…</Card>