Installation
import { WrSquircle, WrSquircleHost } from 'ngwr/squircle';Standalone
Drop-in container. Acts like a div with smooth corners.
<wr-squircle [radius]="24" style="width: 160px; height: 160px; background: var(--wr-color-primary)" />Directive on any element
Add wrSquircle to anything — buttons, tags, images, custom components.
<!-- works on any element -->
<button wr-btn wrSquircle [radius]="16">Save</button>
<wr-tag wrSquircle>v2.0</wr-tag>
<img wrSquircle [radius]="32" src="avatar.jpg" alt="" />Border
Pass [borderWidth] (px) + [borderColor] to paint a ring along the squircle. The directive composites an inner squircle in the content background so the outer ring shows through. Set --wr-squircle-content-bg on the host (CSS var) to colour the inner fill.
Try it
Drag the sliders.
Template reference
The directive exports itself as wrSquircle. Its state is modelled rather than input-only, so a reference can flip the shape off — or thicken its ring — from outside the element.
<div wrSquircle [radius]="20" #shape="wrSquircle">Card</div>
<!-- Anywhere else in the same template -->
<wr-btn (click)="shape.enabled.set(!shape.enabled())">Toggle the squircle</wr-btn>
<wr-btn (click)="shape.borderWidth.set(2)">Add a ring</wr-btn>API
Inputs on the [wrSquircle] directive (wr-squircle is the host element).
| Name | Description | Type | Default |
|---|---|---|---|
radius | Corner radius in CSS pixels. Falls back to --wr-border-radius-base × 16. | number | 12 |
smoothing | Smoothing factor — 0 = plain rounded rect; 1 = full smooth iOS corner. | number | 1 |
enabled | Whether the squircle clip-path is applied. When false, the directive stays inert (clip-path cleared). Modelled as model() so a parent component composing this directive (inject(WrSquircle, { self: true }).enabled.set(...)) can flip the state from outside without exposing an enabled input on its own API. | boolean | true |
borderWidth | Border thickness in CSS pixels. 0 disables the border ring entirely. Modelled (not input()) so parent components composing this directive can flip it imperatively — e.g. WrButton turning on a 1px ring when shape="squircle" outlined is active. | number | 0 |
borderColor | Border colour — any CSS colour. Applied to the host's background so the outer squircle reveals it. Defaults to currentColor so the consuming element's text colour drives the ring. | string | 'currentColor' |
corners | Which corners to squircle. 'all' (default) is the standard four- corner shape; 'left' / 'right' / 'top' / 'bottom' squircle only the two corners on the named side and leave the other two at 90°. 'none' is equivalent to disabling the directive. A model() rather than an input() so a parent composing the directive can flip it imperatively. Nothing in the library does today: this line used to name WrButtonGroup as the consumer, and that component has carried no squircle reference for several releases — wr-btn--squircle is plain CSS now. | WrSquircleCornerMask | 'all' |