Corner Shape

round

squircle

smooth

scoop

bevel

notch

Corner shapes provide modern, organic alternatives to standard border-radius.Use with rounded-* classes and the supports-corner: variant for progressive enhancement.Note: corner-smooth is an alias for superellipse(1.25).

export default function CornerShapeDemo() {
  const shapes = [
    { name: 'round', class: 'corner-round' },
    { name: 'squircle', class: 'corner-squircle' },
    { name: 'smooth', class: 'corner-smooth' },
    { name: 'scoop', class: 'corner-scoop' },
    { name: 'bevel', class: 'corner-bevel' },
    { name: 'notch', class: 'corner-notch' },
  ] as const;

  return (
    <div className="flex flex-col items-center gap-8 py-8">
      <div className="grid grid-cols-2 gap-6 md:grid-cols-3">
        {shapes.map((shape) => (
          <div className="flex flex-col items-center gap-3" key={shape.name}>
            <div
              className={`flex size-24 items-center justify-center rounded-3xl bg-linear-to-br from-blue-500 to-purple-600 font-semibold text-sm text-white shadow-lg ${shape.class}`}
            >
              {shape.name}
            </div>
            <p className="font-medium text-sm capitalize">{shape.name}</p>
          </div>
        ))}
      </div>

      <div className="max-w-2xl text-center">
        <p className="text-muted-foreground text-sm">
          Corner shapes provide modern, organic alternatives to standard border-radius.
          <span className="mt-1 block">
            Use with{' '}
            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">rounded-*</code>{' '}
            classes and the{' '}
            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
              supports-corner:
            </code>{' '}
            variant for progressive enhancement.
          </span>
          <span className="mt-2 block text-xs">
            Note: <code className="rounded bg-muted px-1.5 py-0.5 font-mono">corner-smooth</code> is
            an alias for{' '}
            <code className="rounded bg-muted px-1.5 py-0.5 font-mono">superellipse(1.25)</code>.
          </span>
        </p>
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add @caprice/corner-shape

@caprice-ui/tailwind

Install the following dependencies:

npm install @caprice-ui/tailwind

Copy and paste the following code into your project.

/**
 * @utility corner-shape-*
 * Sets the corner shape of an element.
 * @example
 * <div class="flex p-8 rounded-lg corner-smooth supports-corner:rounded-2xl">
 *   ...
 * </div>
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape
 * @source https://x.com/frederic_ooo/status/1989681563106218177/
 */

@theme inline {
  --corner-shape-round: round;
  --corner-shape-scoop: scoop;
  --corner-shape-bevel: bevel;
  --corner-shape-notch: notch;
  --corner-shape-square: square;
  --corner-shape-squircle: squircle;
  --corner-shape-smooth: superellipse(1.25);
}

@utility corner-* {
  corner-shape: --value(--corner-shape-*);
  corner-shape: --value([*]);
}

@utility corner-t-* {
  corner-block-start-shape: --value(--corner-shape-*);
  corner-block-start-shape: --value([*]);
}
@utility corner-b-* {
  corner-block-end-shape: --value(--corner-shape-*);
  corner-block-end-shape: --value([*]);
}
@utility corner-l-* {
  corner-block-start-shape: --value(--corner-shape-*);
  corner-block-start-shape: --value([*]);
}
@utility corner-r-* {
  corner-block-end-shape: --value(--corner-shape-*);
  corner-block-end-shape: --value([*]);
}
@utility corner-tl-* {
  corner-start-start-shape: --value(--corner-shape-*);
  corner-start-start-shape: --value([*]);
}
@utility corner-tr-* {
  corner-start-end-shape: --value(--corner-shape-*);
  corner-start-end-shape: --value([*]);
}
@utility corner-bl-* {
  corner-end-start-shape: --value(--corner-shape-*);
  corner-end-start-shape: --value([*]);
}
@utility corner-br-* {
  corner-end-end-shape: --value(--corner-shape-*);
  corner-end-end-shape: --value([*]);
}

/** Custom variant to check if the browser supports the corner-shape property */
@custom-variant supports-corner {
  @supports (corner-shape: squircle) {
    @slot;
  }
}

/** * @utility corner-shape-* * Sets the corner shape of an element. * @example * <div class="flex p-8 rounded-lg corner-smooth supports-corner:rounded-2xl"> *   ... * </div> * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape * @source https://x.com/frederic_ooo/status/1989681563106218177/ */@theme inline {  --corner-shape-round: round;  --corner-shape-scoop: scoop;  --corner-shape-bevel: bevel;  --corner-shape-notch: notch;  --corner-shape-square: square;  --corner-shape-squircle: squircle;  --corner-shape-smooth: superellipse(1.25);}@utility corner-* {  corner-shape: --value(--corner-shape-*);  corner-shape: --value([*]);}@utility corner-t-* {  corner-block-start-shape: --value(--corner-shape-*);  corner-block-start-shape: --value([*]);}@utility corner-b-* {  corner-block-end-shape: --value(--corner-shape-*);  corner-block-end-shape: --value([*]);}@utility corner-l-* {  corner-block-start-shape: --value(--corner-shape-*);  corner-block-start-shape: --value([*]);}@utility corner-r-* {  corner-block-end-shape: --value(--corner-shape-*);  corner-block-end-shape: --value([*]);}@utility corner-tl-* {  corner-start-start-shape: --value(--corner-shape-*);  corner-start-start-shape: --value([*]);}@utility corner-tr-* {  corner-start-end-shape: --value(--corner-shape-*);  corner-start-end-shape: --value([*]);}@utility corner-bl-* {  corner-end-start-shape: --value(--corner-shape-*);  corner-end-start-shape: --value([*]);}@utility corner-br-* {  corner-end-end-shape: --value(--corner-shape-*);  corner-end-end-shape: --value([*]);}/** Custom variant to check if the browser supports the corner-shape property */@custom-variant supports-corner {  @supports (corner-shape: squircle) {    @slot;  }}

Usage

Import the utility into your global.css file:

global.css

@import "tailwindcss";
@import "@caprice-ui/tailwind/utility/corner-shape";

Add the utility classes to your markup / components:

example.tsx

<div class="rounded-lg bg-neutral-100 p-4 corner-smooth supports-corner:rounded-2xl">
  I'm smooth on chromium, but have similar radius on non corner-shape supporting browsers with the supports media query
</div>

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Usage

On this page

Contribute