# Squircle

> Figma-style smooth-corner rectangle, clipped with a superellipse path and re-computed on resize. **Deprecated** — the native `corner-shape` route, which 31 entry points already ride through the `smooth-br` SCSS mixin, is the one to use. This entry point exists because that property was Chromium-only, and it will be removed in the major after Safari stable ships it. Until then it is still the only deterministic squircle, so it is deprecated rather than gone.

Source: https://ngwr.dev/reference/components/squircle  
Kind: Component, Deprecated

## Installation

```angular-ts
import { WrSquircle, WrSquircleHost } from 'ngwr/squircle';
```

## Standalone

Drop-in container. Acts like a div with smooth corners.

```angular-html
<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.

```angular-html
<!-- 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.

```angular-html
<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'` |