Squircle

Variables

Variable	Type
`--squircle-border-radius`	`number \| px`
`--squircle-border-top-left-radius`	`number \| px`
`--squircle-border-top-right-radius`	`number \| px`
`--squircle-border-bottom-right-radius`	`number \| px`
`--squircle-border-bottom-left-radius`	`number \| px`

Usage

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

.squircle {
  --squircle-border-radius: 10px;
}

The value can be in px or a simple number:

.squircle {
  --squircle-border-radius: 10;
}

Other values like rem, em, vh, vw, etc. are not supported.

You can also customize the border radius of each corner:

.squircle {
  --squircle-border-top-left-radius: 5px;
  --squircle-border-top-right-radius: 10px;
  --squircle-border-bottom-right-radius: 15px;
  --squircle-border-bottom-left-radius: 20px;
}

Border Radius

Variables

Usage

On this page