Squircle

Variables

Variable	Type
`--squircle-border-smoothing`	`number`
`--squircle-border-top-left-smoothing`	`number`
`--squircle-border-top-right-smoothing`	`number`
`--squircle-border-bottom-right-smoothing`	`number`
`--squircle-border-bottom-left-smoothing`	`number`

We recommend a value between 0.2 and 1 for best results.

Usage

You can customize the smoothing of a squircle by using the --squircle-border-smoothing variable.

.squircle {
  --squircle-border-smoothing: 0.5;
}

You can also customize the border smoothing of each corner:

.squircle {
  --squircle-border-top-left-smoothing: 0.2;
  --squircle-border-top-right-smoothing: 0.4;
  --squircle-border-bottom-right-smoothing: 0.6;
  --squircle-border-bottom-left-smoothing: 0.8;
}

Border Smoothing

Variables

Usage

On this page