Border Radius
Customize the border radius of a squircle.
Variables
| Class | Styles |
|---|---|
squircle-<length | number> | --squircle-border-radius: <length | number>; |
squircle-none | --squircle-border-radius: 0; |
squircle-xs | --squircle-border-radius: 2px; |
squircle-sm | --squircle-border-radius: 4px; |
squircle-md | --squircle-border-radius: 6px; |
squircle-lg | --squircle-border-radius: 8px; |
squircle-xl | --squircle-border-radius: 12px; |
squircle-2xl | --squircle-border-radius: 16px; |
squircle-3xl | --squircle-border-radius: 24px; |
squircle-4xl | --squircle-border-radius: 32px; |
squircle-5xl | --squircle-border-radius: 40px; |
squircle-6xl | --squircle-border-radius: 50px; |
squircle-7xl | --squircle-border-radius: 60px; |
squircle-full | --squircle-border-radius: 9999px; |
squircle-r-<length | number> | --squircle-border-top-right-radius: <length | number>;
--squircle-border-bottom-right-radius: <length | number>; |
squircle-r-none | --squircle-border-top-right-radius: 0;
--squircle-border-bottom-right-radius: 0; |
squircle-r-xs | --squircle-border-top-right-radius: 2px;
--squircle-border-bottom-right-radius: 2px; |
squircle-r-sm | --squircle-border-top-right-radius: 4px;
--squircle-border-bottom-right-radius: 4px; |
squircle-r-md | --squircle-border-top-right-radius: 6px;
--squircle-border-bottom-right-radius: 6px; |
squircle-r-lg | --squircle-border-top-right-radius: 8px;
--squircle-border-bottom-right-radius: 8px; |
squircle-r-xl | --squircle-border-top-right-radius: 12px;
--squircle-border-bottom-right-radius: 12px; |
squircle-r-2xl | --squircle-border-top-right-radius: 16px;
--squircle-border-bottom-right-radius: 16px; |
squircle-r-3xl | --squircle-border-top-right-radius: 24px;
--squircle-border-bottom-right-radius: 24px; |
squircle-r-4xl | --squircle-border-top-right-radius: 32px;
--squircle-border-bottom-right-radius: 32px; |
squircle-r-5xl | --squircle-border-top-right-radius: 40px;
--squircle-border-bottom-right-radius: 40px; |
squircle-r-6xl | --squircle-border-top-right-radius: 50px;
--squircle-border-bottom-right-radius: 50px; |
squircle-r-7xl | --squircle-border-top-right-radius: 60px;
--squircle-border-bottom-right-radius: 60px; |
squircle-r-full | --squircle-border-top-right-radius: 9999px;
--squircle-border-bottom-right-radius: 9999px; |
squircle-l-<length | number> | --squircle-border-top-left-radius: <length | number>;
--squircle-border-bottom-left-radius: <length | number>; |
squircle-l-none | --squircle-border-top-left-radius: 0;
--squircle-border-bottom-left-radius: 0; |
squircle-l-xs | --squircle-border-top-left-radius: 2px;
--squircle-border-bottom-left-radius: 2px; |
squircle-l-sm | --squircle-border-top-left-radius: 4px;
--squircle-border-bottom-left-radius: 4px; |
squircle-l-md | --squircle-border-top-left-radius: 6px;
--squircle-border-bottom-left-radius: 6px; |
squircle-l-lg | --squircle-border-top-left-radius: 8px;
--squircle-border-bottom-left-radius: 8px; |
squircle-l-xl | --squircle-border-top-left-radius: 12px;
--squircle-border-bottom-left-radius: 12px; |
squircle-l-2xl | --squircle-border-top-left-radius: 16px;
--squircle-border-bottom-left-radius: 16px; |
squircle-l-3xl | --squircle-border-top-left-radius: 24px;
--squircle-border-bottom-left-radius: 24px; |
squircle-l-4xl | --squircle-border-top-left-radius: 32px;
--squircle-border-bottom-left-radius: 32px; |
squircle-l-5xl | --squircle-border-top-left-radius: 40px;
--squircle-border-bottom-left-radius: 40px; |
squircle-l-6xl | --squircle-border-top-left-radius: 50px;
--squircle-border-bottom-left-radius: 50px; |
squircle-l-7xl | --squircle-border-top-left-radius: 60px;
--squircle-border-bottom-left-radius: 60px; |
squircle-l-full | --squircle-border-top-left-radius: 9999px;
--squircle-border-bottom-left-radius: 9999px; |
squircle-t-<length | number> | --squircle-border-top-right-radius: <length | number>;
--squircle-border-top-left-radius: <length | number>; |
squircle-t-none | --squircle-border-top-right-radius: 0;
--squircle-border-top-left-radius: 0; |
squircle-t-xs | --squircle-border-top-right-radius: 2px;
--squircle-border-top-left-radius: 2px; |
squircle-t-sm | --squircle-border-top-right-radius: 4px;
--squircle-border-top-left-radius: 4px; |
squircle-t-md | --squircle-border-top-right-radius: 6px;
--squircle-border-top-left-radius: 6px; |
squircle-t-lg | --squircle-border-top-right-radius: 8px;
--squircle-border-top-left-radius: 8px; |
squircle-t-xl | --squircle-border-top-right-radius: 12px;
--squircle-border-top-left-radius: 12px; |
squircle-t-2xl | --squircle-border-top-right-radius: 16px;
--squircle-border-top-left-radius: 16px; |
squircle-t-3xl | --squircle-border-top-right-radius: 24px;
--squircle-border-top-left-radius: 24px; |
squircle-t-4xl | --squircle-border-top-right-radius: 32px;
--squircle-border-top-left-radius: 32px; |
squircle-t-5xl | --squircle-border-top-right-radius: 40px;
--squircle-border-top-left-radius: 40px; |
squircle-t-6xl | --squircle-border-top-right-radius: 50px;
--squircle-border-top-left-radius: 50px; |
squircle-t-7xl | --squircle-border-top-right-radius: 60px;
--squircle-border-top-left-radius: 60px; |
squircle-t-full | --squircle-border-top-right-radius: 9999px;
--squircle-border-top-left-radius: 9999px; |
squircle-b-<length | number> | --squircle-border-bottom-right-radius: <length | number>;
--squircle-border-bottom-left-radius: <length | number>; |
squircle-b-none | --squircle-border-bottom-right-radius: 0;
--squircle-border-bottom-left-radius: 0; |
squircle-b-xs | --squircle-border-bottom-right-radius: 2px;
--squircle-border-bottom-left-radius: 2px; |
squircle-b-sm | --squircle-border-bottom-right-radius: 4px;
--squircle-border-bottom-left-radius: 4px; |
squircle-b-md | --squircle-border-bottom-right-radius: 6px;
--squircle-border-bottom-left-radius: 6px; |
squircle-b-lg | --squircle-border-bottom-right-radius: 8px;
--squircle-border-bottom-left-radius: 8px; |
squircle-b-xl | --squircle-border-bottom-right-radius: 12px;
--squircle-border-bottom-left-radius: 12px; |
squircle-b-2xl | --squircle-border-bottom-right-radius: 16px;
--squircle-border-bottom-left-radius: 16px; |
squircle-b-3xl | --squircle-border-bottom-right-radius: 24px;
--squircle-border-bottom-left-radius: 24px; |
squircle-b-4xl | --squircle-border-bottom-right-radius: 32px;
--squircle-border-bottom-left-radius: 32px; |
squircle-b-5xl | --squircle-border-bottom-right-radius: 40px;
--squircle-border-bottom-left-radius: 40px; |
squircle-b-6xl | --squircle-border-bottom-right-radius: 50px;
--squircle-border-bottom-left-radius: 50px; |
squircle-b-7xl | --squircle-border-bottom-right-radius: 60px;
--squircle-border-bottom-left-radius: 60px; |
squircle-b-full | --squircle-border-bottom-right-radius: 9999px;
--squircle-border-bottom-left-radius: 9999px; |
squircle-tr-<length | number> | --squircle-border-top-right-radius: <length | number>; |
squircle-tr-none | --squircle-border-top-right-radius: 0; |
squircle-tr-xs | --squircle-border-top-right-radius: 2px; |
squircle-tr-sm | --squircle-border-top-right-radius: 4px; |
squircle-tr-md | --squircle-border-top-right-radius: 6px; |
squircle-tr-lg | --squircle-border-top-right-radius: 8px; |
squircle-tr-xl | --squircle-border-top-right-radius: 12px; |
squircle-tr-2xl | --squircle-border-top-right-radius: 16px; |
squircle-tr-3xl | --squircle-border-top-right-radius: 24px; |
squircle-tr-4xl | --squircle-border-top-right-radius: 32px; |
squircle-tr-5xl | --squircle-border-top-right-radius: 40px; |
squircle-tr-6xl | --squircle-border-top-right-radius: 50px; |
squircle-tr-7xl | --squircle-border-top-right-radius: 60px; |
squircle-tr-full | --squircle-border-top-right-radius: 9999px; |
squircle-tl-<length | number> | --squircle-border-top-left-radius: <length | number>; |
squircle-tl-none | --squircle-border-top-left-radius: 0; |
squircle-tl-xs | --squircle-border-top-left-radius: 2px; |
squircle-tl-sm | --squircle-border-top-left-radius: 4px; |
squircle-tl-md | --squircle-border-top-left-radius: 6px; |
squircle-tl-lg | --squircle-border-top-left-radius: 8px; |
squircle-tl-xl | --squircle-border-top-left-radius: 12px; |
squircle-tl-2xl | --squircle-border-top-left-radius: 16px; |
squircle-tl-3xl | --squircle-border-top-left-radius: 24px; |
squircle-tl-4xl | --squircle-border-top-left-radius: 32px; |
squircle-tl-5xl | --squircle-border-top-left-radius: 40px; |
squircle-tl-6xl | --squircle-border-top-left-radius: 50px; |
squircle-tl-7xl | --squircle-border-top-left-radius: 60px; |
squircle-tl-full | --squircle-border-top-left-radius: 9999px; |
squircle-br-<length | number> | --squircle-border-bottom-right-radius: <length | number>; |
squircle-br-none | --squircle-border-bottom-right-radius: 0; |
squircle-br-xs | --squircle-border-bottom-right-radius: 2px; |
squircle-br-sm | --squircle-border-bottom-right-radius: 4px; |
squircle-br-md | --squircle-border-bottom-right-radius: 6px; |
squircle-br-lg | --squircle-border-bottom-right-radius: 8px; |
squircle-br-xl | --squircle-border-bottom-right-radius: 12px; |
squircle-br-2xl | --squircle-border-bottom-right-radius: 16px; |
squircle-br-3xl | --squircle-border-bottom-right-radius: 24px; |
squircle-br-4xl | --squircle-border-bottom-right-radius: 32px; |
squircle-br-5xl | --squircle-border-bottom-right-radius: 40px; |
squircle-br-6xl | --squircle-border-bottom-right-radius: 50px; |
squircle-br-7xl | --squircle-border-bottom-right-radius: 60px; |
squircle-br-full | --squircle-border-bottom-right-radius: 9999px; |
squircle-bl-<length | number> | --squircle-border-bottom-left-radius: <length | number>; |
squircle-bl-none | --squircle-border-bottom-left-radius: 0; |
squircle-bl-xs | --squircle-border-bottom-left-radius: 2px; |
squircle-bl-sm | --squircle-border-bottom-left-radius: 4px; |
squircle-bl-md | --squircle-border-bottom-left-radius: 6px; |
squircle-bl-lg | --squircle-border-bottom-left-radius: 8px; |
squircle-bl-xl | --squircle-border-bottom-left-radius: 12px; |
squircle-bl-2xl | --squircle-border-bottom-left-radius: 16px; |
squircle-bl-3xl | --squircle-border-bottom-left-radius: 24px; |
squircle-bl-4xl | --squircle-border-bottom-left-radius: 32px; |
squircle-bl-5xl | --squircle-border-bottom-left-radius: 40px; |
squircle-bl-6xl | --squircle-border-bottom-left-radius: 50px; |
squircle-bl-7xl | --squircle-border-bottom-left-radius: 60px; |
squircle-bl-full | --squircle-border-bottom-left-radius: 9999px; |
Other values than px such as rem, em, vh, vw, etc. are not supported.
Usage
You can also customize individual corners.
You can also use a custom radius.