feat: add corner shapes utility classes

Author: Baptist

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add utilities for the experimental `corner-shape` property (e.g. `corner-scoop`, `corner-tl-bevel`)
 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
 
 ## [4.1.17] - 2025-11-06

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -3779,6 +3779,96 @@ exports[`getClassList 1`] = `
   "contrast-125",
   "contrast-150",
   "contrast-200",
+  "corner-b-bevel",
+  "corner-b-notch",
+  "corner-b-round",
+  "corner-b-scoop",
+  "corner-b-square",
+  "corner-b-squircle",
+  "corner-bevel",
+  "corner-bl-bevel",
+  "corner-bl-notch",
+  "corner-bl-round",
+  "corner-bl-scoop",
+  "corner-bl-square",
+  "corner-bl-squircle",
+  "corner-br-bevel",
+  "corner-br-notch",
+  "corner-br-round",
+  "corner-br-scoop",
+  "corner-br-square",
+  "corner-br-squircle",
+  "corner-e-bevel",
+  "corner-e-notch",
+  "corner-e-round",
+  "corner-e-scoop",
+  "corner-e-square",
+  "corner-e-squircle",
+  "corner-ee-bevel",
+  "corner-ee-notch",
+  "corner-ee-round",
+  "corner-ee-scoop",
+  "corner-ee-square",
+  "corner-ee-squircle",
+  "corner-es-bevel",
+  "corner-es-notch",
+  "corner-es-round",
+  "corner-es-scoop",
+  "corner-es-square",
+  "corner-es-squircle",
+  "corner-l-bevel",
+  "corner-l-notch",
+  "corner-l-round",
+  "corner-l-scoop",
+  "corner-l-square",
+  "corner-l-squircle",
+  "corner-notch",
+  "corner-r-bevel",
+  "corner-r-notch",
+  "corner-r-round",
+  "corner-r-scoop",
+  "corner-r-square",
+  "corner-r-squircle",
+  "corner-round",
+  "corner-s-bevel",
+  "corner-s-notch",
+  "corner-s-round",
+  "corner-s-scoop",
+  "corner-s-square",
+  "corner-s-squircle",
+  "corner-scoop",
+  "corner-se-bevel",
+  "corner-se-notch",
+  "corner-se-round",
+  "corner-se-scoop",
+  "corner-se-square",
+  "corner-se-squircle",
+  "corner-square",
+  "corner-squircle",
+  "corner-ss-bevel",
+  "corner-ss-notch",
+  "corner-ss-round",
+  "corner-ss-scoop",
+  "corner-ss-square",
+  "corner-ss-squircle",
+  "corner-t-bevel",
+  "corner-t-notch",
+  "corner-t-round",
+  "corner-t-scoop",
+  "corner-t-square",
+  "corner-t-squircle",
+  "corner-tl-bevel",
+  "corner-tl-notch",
+  "corner-tl-round",
+  "corner-tl-scoop",
+  "corner-tl-square",
+  "corner-tl-squircle",
+  "corner-tr-bevel",
+  "corner-tr-notch",
+  "corner-tr-round",
+  "corner-tr-scoop",
+  "corner-tr-square",
+  "corner-tr-squircle",
   "cursor-alias",
   "cursor-all-scroll",
   "cursor-auto",

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -35,6 +35,10 @@ test('config values can be merged into the theme', () => {
             sm: '0.33rem',
           },
 
+          cornerShape: {
+            scoop: 'superellipse(0.6)',
+          },
+
           animation: {
             blink: 'blink 1s linear infinite',
           },
@@ -93,6 +97,7 @@ test('config values can be merged into the theme', () => {
   expect(theme.resolve('normal', ['--shadow'])).toEqual('0 1px 3px black')
   expect(theme.resolve('retro', ['--aspect'])).toEqual('4 / 3')
   expect(theme.resolve('sm', ['--radius'])).toEqual('0.33rem')
+  expect(theme.resolve('scoop', ['--corner-shape'])).toEqual('superellipse(0.6)')
   expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite')
   expect(theme.resolve('red-500', ['--color'])).toEqual('red')
   expect(theme.resolve('sans', ['--font'])).toEqual('Inter, system-ui, sans-serif')

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -158,6 +158,7 @@ export function keyPathToCssProperty(path: string[]) {
   if (path[0] === 'animation') path[0] = 'animate'
   if (path[0] === 'aspectRatio') path[0] = 'aspect'
   if (path[0] === 'borderRadius') path[0] = 'radius'
+  if (path[0] === 'cornerShape') path[0] = 'corner-shape'
   if (path[0] === 'boxShadow') path[0] = 'shadow'
   if (path[0] === 'colors') path[0] = 'color'
   if (path[0] === 'containers') path[0] = 'container'

packages/tailwindcss/src/compat/config/create-compat-config.ts

@@ -34,6 +34,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
           ...theme('radius', {}),
         }),
 
+        cornerShape: ({ theme }) => ({
+          ...theme('corner-shape', {}),
+        }),
+
         screens: ({ theme }) => ({
           ...theme('breakpoint', {}),
         }),

packages/tailwindcss/src/compat/default-theme.ts

@@ -171,6 +171,15 @@ export default {
     '3xl': '1.5rem',
     full: '9999px',
   },
+  cornerShape: {
+    DEFAULT: 'round',
+    round: 'round',
+    square: 'square',
+    bevel: 'bevel',
+    scoop: 'scoop',
+    notch: 'notch',
+    squircle: 'squircle',
+  },
   borderSpacing: ({ theme }) => theme('spacing'),
   borderWidth: {
     DEFAULT: '1px',

packages/tailwindcss/src/property-order.ts

@@ -191,6 +191,16 @@ export default [
   'border-bottom-right-radius',
   'border-bottom-left-radius',
 
+  'corner-shape',
+  'corner-start-start-shape',
+  'corner-start-end-shape',
+  'corner-end-end-shape',
+  'corner-end-start-shape',
+  'corner-top-left-shape',
+  'corner-top-right-shape',
+  'corner-bottom-right-shape',
+  'corner-bottom-left-shape',
+
   'border-width',
   'border-inline-width',
   'border-block-width',