Border Smoothing
Customize the border smoothing of a squircle.
Variables
| Class | Styles |
|---|---|
squircle-smooth-<length | number> | --squircle-border-smoothing: <length | number>; |
squircle-smooth-xs | --squircle-border-smoothing: 0.2; |
squircle-smooth-sm | --squircle-border-smoothing: 0.4; |
squircle-smooth-md | --squircle-border-smoothing: 0.6; |
squircle-smooth-lg | --squircle-border-smoothing: 0.8; |
squircle-smooth-xl | --squircle-border-smoothing: 1; |
squircle-smooth-r-<length | number> | --squircle-border-top-right-smoothing: <length | number>;
--squircle-border-bottom-right-smoothing: <length | number>; |
squircle-smooth-r-xs | --squircle-border-top-right-smoothing: 0.2;
--squircle-border-bottom-right-smoothing: 0.2; |
squircle-smooth-r-sm | --squircle-border-top-right-smoothing: 0.4;
--squircle-border-bottom-right-smoothing: 0.4; |
squircle-smooth-r-md | --squircle-border-top-right-smoothing: 0.6;
--squircle-border-bottom-right-smoothing: 0.6; |
squircle-smooth-r-lg | --squircle-border-top-right-smoothing: 0.8;
--squircle-border-bottom-right-smoothing: 0.8; |
squircle-smooth-r-xl | --squircle-border-top-right-smoothing: 1;
--squircle-border-bottom-right-smoothing: 1; |
squircle-smooth-l-<length | number> | --squircle-border-top-left-smoothing: <length | number>;
--squircle-border-bottom-left-smoothing: <length | number>; |
squircle-smooth-l-xs | --squircle-border-top-left-smoothing: 0.2;
--squircle-border-bottom-left-smoothing: 0.2; |
squircle-smooth-l-sm | --squircle-border-top-left-smoothing: 0.4;
--squircle-border-bottom-left-smoothing: 0.4; |
squircle-smooth-l-md | --squircle-border-top-left-smoothing: 0.6;
--squircle-border-bottom-left-smoothing: 0.6; |
squircle-smooth-l-lg | --squircle-border-top-left-smoothing: 0.8;
--squircle-border-bottom-left-smoothing: 0.8; |
squircle-smooth-l-xl | --squircle-border-top-left-smoothing: 1;
--squircle-border-bottom-left-smoothing: 1; |
squircle-smooth-t-<length | number> | --squircle-border-top-right-smoothing: <length | number>;
--squircle-border-top-left-smoothing: <length | number>; |
squircle-smooth-t-xs | --squircle-border-top-right-smoothing: 0.2;
--squircle-border-top-left-smoothing: 0.2; |
squircle-smooth-t-sm | --squircle-border-top-right-smoothing: 0.4;
--squircle-border-top-left-smoothing: 0.4; |
squircle-smooth-t-md | --squircle-border-top-right-smoothing: 0.6;
--squircle-border-top-left-smoothing: 0.6; |
squircle-smooth-t-lg | --squircle-border-top-right-smoothing: 0.8;
--squircle-border-top-left-smoothing: 0.8; |
squircle-smooth-t-xl | --squircle-border-top-right-smoothing: 1;
--squircle-border-top-left-smoothing: 1; |
squircle-smooth-b-<length | number> | --squircle-border-bottom-right-smoothing: <length | number>;
--squircle-border-bottom-left-smoothing: <length | number>; |
squircle-smooth-b-xs | --squircle-border-bottom-right-smoothing: 0.2;
--squircle-border-bottom-left-smoothing: 0.2; |
squircle-smooth-b-sm | --squircle-border-bottom-right-smoothing: 0.4;
--squircle-border-bottom-left-smoothing: 0.4; |
squircle-smooth-b-md | --squircle-border-bottom-right-smoothing: 0.6;
--squircle-border-bottom-left-smoothing: 0.6; |
squircle-smooth-b-lg | --squircle-border-bottom-right-smoothing: 0.8;
--squircle-border-bottom-left-smoothing: 0.8; |
squircle-smooth-b-xl | --squircle-border-bottom-right-smoothing: 1;
--squircle-border-bottom-left-smoothing: 1; |
squircle-smooth-tr-<length | number> | --squircle-border-top-right-smoothing: <length | number>; |
squircle-smooth-tr-xs | --squircle-border-top-right-smoothing: 0.2; |
squircle-smooth-tr-sm | --squircle-border-top-right-smoothing: 0.4; |
squircle-smooth-tr-md | --squircle-border-top-right-smoothing: 0.6; |
squircle-smooth-tr-lg | --squircle-border-top-right-smoothing: 0.8; |
squircle-smooth-tr-xl | --squircle-border-top-right-smoothing: 1; |
squircle-smooth-tl-<length | number> | --squircle-border-top-left-smoothing: <length | number>; |
squircle-smooth-tl-xs | --squircle-border-top-left-smoothing: 0.2; |
squircle-smooth-tl-sm | --squircle-border-top-left-smoothing: 0.4; |
squircle-smooth-tl-md | --squircle-border-top-left-smoothing: 0.6; |
squircle-smooth-tl-lg | --squircle-border-top-left-smoothing: 0.8; |
squircle-smooth-tl-xl | --squircle-border-top-left-smoothing: 1; |
squircle-smooth-br-<length | number> | --squircle-border-bottom-right-smoothing: <length | number>; |
squircle-smooth-br-xs | --squircle-border-bottom-right-smoothing: 0.2; |
squircle-smooth-br-sm | --squircle-border-bottom-right-smoothing: 0.4; |
squircle-smooth-br-md | --squircle-border-bottom-right-smoothing: 0.6; |
squircle-smooth-br-lg | --squircle-border-bottom-right-smoothing: 0.8; |
squircle-smooth-br-xl | --squircle-border-bottom-right-smoothing: 1; |
squircle-smooth-bl-<length | number> | --squircle-border-bottom-left-smoothing: <length | number>; |
squircle-smooth-bl-xs | --squircle-border-bottom-left-smoothing: 0.2; |
squircle-smooth-bl-sm | --squircle-border-bottom-left-smoothing: 0.4; |
squircle-smooth-bl-md | --squircle-border-bottom-left-smoothing: 0.6; |
squircle-smooth-bl-lg | --squircle-border-bottom-left-smoothing: 0.8; |
squircle-smooth-bl-xl | --squircle-border-bottom-left-smoothing: 1; |
Usage
You can also customize individual corners.
You can also use a custom smoothing value.