{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "corner-shape-eckenformen",
 "name": "Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)",
 "name_en": "CSS corner-shape (squircle, scoop, notch, bevel)",
 "kurz": "Squircle, Scoop, Notch und Bevel als echte Eckenformen: Ticket, Tags, Avatar und Button bekommen eine eigene Eckensprache, die beim Umschalten weich morpht.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "modern",
  "präzise",
  "verspielt",
  "app-artig"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "border-radius legt die Größe der Ecke fest, corner-shape ihre Form. Mögliche Werte: round (Standard), squircle (Superellipse, wie App-Icons), bevel (abgeschrägt), scoop (nach innen gewölbt), notch (eckige Kerbe), square und stufenlos superellipse(k). Jede Ecke lässt sich einzeln setzen, etwa corner-shape: bevel round round bevel. Hintergrund, Rahmen, Schatten, outline und overflow folgen der Form. Das unterscheidet corner-shape von clip-path. Browserstand laut MDN (31.10.2026): Chrome und Edge ab 139, Safari und Firefox nur in Vorschauversionen.",
  "warum_es_wirkt": "Ecken geben einer Oberfläche Charakter, ohne SVG-Masken oder clip-path. Squircles wirken weicher und hochwertiger als Kreisradien. Scoop, Notch und Bevel machen aus Tickets, Tags und Buttons erkennbare Objekte. Schatten und Rahmen bleiben dabei korrekt.",
  "wann_einsetzen": "Avatare und App-Icons (Squircle), Tickets und Gutscheine (Scoop), Status- und Themen-Tags (Notch, Bevel), Fahnen und Richtungs-Badges, Hover-Morph an Buttons. Gut in Design-Systemen, die neben dem Radius-Token ein Form-Token führen.",
  "wann_nicht": "Wenn die Form inhaltlich wichtig ist: Safari und Firefox zeigen nur die normale Rundung. Nicht als Ersatz für freie Silhouetten, dafür shape() oder clip-path nehmen.",
  "varianten": [
   "Squircle-Avatar: border-radius: 50 % plus corner-shape: squircle, ohne Unterstützung ein Kreis",
   "Logo-Fahne mit gemischten Ecken: border-radius: 16px 0 0 16px; corner-shape: bevel round round bevel (CSS-Tricks)",
   "Radius-Tokens nur bei Unterstützung umschalten: @supports (corner-shape: squircle) { :root { --radius-md: 10px } } (utilitybend: 3, 4, 10, 14 px)",
   "Ticket oder Gutschein aus zwei Teilen mit scoop-Ecken an der Abrisskante",
   "Status-Tags mit notch, Themen-Tags mit bevel",
   "Hover-Morph am Button: bevel → squircle per transition",
   "Freie Formen mit border-shape (ab Chrome 147) und polygon(round …) (ab Chrome 150): Lernweg als Pfeilkette, Button als Wegweiser, Stern-Sticker, Sprechblase; Rahmen und Schatten folgen der Form, Rückfall clip-path"
  ],
  "umsetzung": "Zuerst das vollständige Design mit border-radius bauen. Dann ergänzen: @supports (corner-shape: squircle) { .avatar { corner-shape: squircle; } }. Squircles wirken kleiner als Kreisradien, deshalb den Radius etwas größer wählen. Pro Ecke: corner-shape: bevel round round bevel. Feinsteuerung mit superellipse(k): 1 ist round, 2 squircle, 0 bevel, -1 scoop. Die Werte interpolieren über ihre superellipse()-Entsprechung, deshalb lässt sich die Form animieren: .btn { border-radius: 18px; corner-shape: bevel; transition: corner-shape .3s cubic-bezier(.37, 0, .63, 1); } .btn:hover { corner-shape: squircle; }. Als Token neben --radius ein --corner führen.",
  "mobil": "Android-Chrome unterstützt corner-shape, iOS-Safari noch nicht. Dort greift die normale Rundung. Die Bedienung ändert sich nicht.",
  "reduzierte_bewegung": "Der Form-Morph ist dezent. Bei prefers-reduced-motion: reduce trotzdem transition: none setzen, die Form wechselt dann sofort.",
  "barrierefreiheit": "Rein visuell. Der Fokusring (outline) folgt der Form: Bei scoop und notch prüfen, dass er sichtbar bleibt. Tiefe Kerben dürfen die Klickfläche nicht verkleinern."
 },
 "messwerte": {
  "easing": "ease bzw. cubic-bezier(.37,0,.63,1) (zachleat, dort für Farbe am Squircle)",
  "dauer_ms": "Hover-Morph 250–400",
  "stagger_ms": "",
  "distanz": "Radius-Tokens bei Squircle 3/4/10/14 px (utilitybend); Fahne border-radius 16px 0 0 16px (CSS-Tricks)",
  "sonstiges": "Browserstand 31.10.2026 laut MDN BCD: Chrome 139+, Firefox und Safari nur Preview. Werte interpolieren über superellipse()",
  "herkunft": "beobachtet",
  "quelle": "https://www.zachleat.com/ (Inline-CSS); https://css-tricks.com/wp-content/themes/CSS-Tricks-19/style.css; https://utilitybend.com/_astro/Layout.BRsgPYN7.css"
 },
 "kurve": {
  "bezier": [
   0.37,
   0.0,
   0.63,
   1.0
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Zach Leatherman (zachleat.com)",
   "url": "https://www.zachleat.com/",
   "auszeichnung": "",
   "beobachtung": "Avatar-Rahmen: picture:has(>.z-avatar-squircle) { corner-shape: squircle; border-radius: 50%; rotate: -8deg; overflow: clip; transition: background-color .4s cubic-bezier(.37,0,.63,1) }, Bild innen rotate 8deg, scale 1.06 (Inline-CSS der Startseite).",
   "art": "website"
  },
  {
   "seite": "CSS-Tricks",
   "url": "https://css-tricks.com/",
   "auszeichnung": "",
   "beobachtung": "Logo-Label im Header: @supports (corner-shape: bevel) { .site-header .logo span { border-radius: 16px 0 0 16px; corner-shape: bevel round round bevel } } (Theme-Stylesheet CSS-Tricks-19/style.css).",
   "art": "website"
  },
  {
   "seite": "utilitybend (Brecht De Ruyte)",
   "url": "https://utilitybend.com/",
   "auszeichnung": "",
   "beobachtung": "Radius-Tokens werden nur bei Unterstützung neu gesetzt: @supports (corner-shape: squircle) { :root { --p-radius-xs: 3px; --p-radius-sm: 4px; --p-radius-md: 10px; --p-radius-lg: 14px … } }, angewendet auf Intro-Text, Artikel-Vorschauen, Code-Blöcke, Navigation (_astro/Layout.BRsgPYN7.css).",
   "art": "website"
  },
  {
   "seite": "nerdy.dev (Adam Argyle)",
   "url": "https://nerdy.dev/",
   "auszeichnung": "",
   "beobachtung": "Karten mit @supports (corner-shape: squircle) { border-radius: var(--radius-5); corner-shape: squircle } (style.css, CSS-Nesting).",
   "art": "website"
  },
  {
   "seite": "Smashing Magazine – Beyond border-radius (03/2026)",
   "url": "https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/",
   "auszeichnung": "",
   "beobachtung": "Praxisbeispiele (Ribbon-Badge, Queue-Items mit scoop, Tags mit notch/bevel, Button-Hover bevel → squircle) mit Zwei-Stufen-Ansatz ‚good and better‘ über @layer und @supports.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Smashing Magazine – Beyond border-radius: What the CSS corner-shape Property Unlocks",
   "url": "https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/"
  },
  {
   "titel": "Squircles in CSS: corner-shape, superellipse() and Browser Support (2026)",
   "url": "https://squircle.js.org/blog/squircles-in-css"
  },
  {
   "titel": "MDN – corner-shape",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape"
  }
 ],
 "kombinierbar_mit": [
  "clip-path-form-hover",
  "button-zustaende",
  "neo-skeuomorph-taktile-ui",
  "bento-grid-interaktiv",
  "druck-feedback"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Squircle, Scoop, Notch und Bevel als echte Eckenformen: Ticket, Tags, Avatar und Button bekommen eine eigene Eckensprache, die beim Umschalten weich morpht.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.37, 0, 0.63, 1) (gemessen bei zachleat.com)",
   "wechsel_ms": 400,
   "hover_morph_ms": 300,
   "hover_morph": "Button border-radius 18px, corner-shape bevel → squircle",
   "eckensprache": "Karte 36px squircle; Kursbild 32px squircle; Avatar 50% squircle; Status-Tag 8px notch; Themen-Tag 10px bevel; Modul-Kachel 7px bevel; Ticket 18px round scoop scoop round + Abriss 18px scoop round round scoop; Sticker 50% superellipse(-0.3); Logo-Fahne 16px 0 0 16px bevel round round bevel; Knopf 12px squircle",
   "alles_squircle": "Karte 44px, Kursbild 40px, Tags und Kacheln 10px, Button 18px, Ticket 14px, Knopf 14px, Avatar und Sticker 50%; alles corner-shape squircle",
   "rueckfall_nur_rundung": "Karte 28px, Kursbild 24px, Tags 6px, Kachel 5px, Button 14px, Ticket 14px, Fahne 10px 0 0 10px; corner-shape round",
   "einbindung": "border-radius immer; corner-shape nur in @supports (corner-shape: squircle). Formen als Custom Properties (--r, --f) pro Element, Varianten als Token-Sätze per data-Attribut"
  },
  "ausloeser": "hover",
  "touch": "Der Button morpht beim Antippen (:active) von bevel zu squircle. Tippen auf ein Element zeigt seine Werte. Die Varianten-Leiste sitzt auf dem Telefon unten fest. Variante border-shape: Wegweiser-Spitze wächst beim Antippen (:active).",
  "reduziert": "Formwechsel und Hover-Morph springen sofort um (Transition 0,01 ms). Die Vorführung schaltet die Varianten ohne Zeiger um. Variante border-shape: Formen stehen, Hover-Morph sofort.",
  "korrekturen": {
   "beschreibung": "border-radius legt die Größe der Ecke fest, corner-shape ihre Form. Mögliche Werte: round (Standard), squircle (Superellipse, wie App-Icons), bevel (abgeschrägt), scoop (nach innen gewölbt), notch (eckige Kerbe), square und stufenlos superellipse(k). Jede Ecke lässt sich einzeln setzen, etwa corner-shape: bevel round round bevel. Hintergrund, Rahmen, Schatten, outline und overflow folgen der Form. Das unterscheidet corner-shape von clip-path. Browserstand laut MDN (31.10.2026): Chrome und Edge ab 139, Safari und Firefox nur in Vorschauversionen.",
   "warum_es_wirkt": "Ecken geben einer Oberfläche Charakter, ohne SVG-Masken oder clip-path. Squircles wirken weicher und hochwertiger als Kreisradien. Scoop, Notch und Bevel machen aus Tickets, Tags und Buttons erkennbare Objekte. Schatten und Rahmen bleiben dabei korrekt.",
   "wann_einsetzen": "Avatare und App-Icons (Squircle), Tickets und Gutscheine (Scoop), Status- und Themen-Tags (Notch, Bevel), Fahnen und Richtungs-Badges, Hover-Morph an Buttons. Gut in Design-Systemen, die neben dem Radius-Token ein Form-Token führen.",
   "wann_nicht": "Wenn die Form inhaltlich wichtig ist: Safari und Firefox zeigen nur die normale Rundung. Nicht als Ersatz für freie Silhouetten, dafür shape() oder clip-path nehmen.",
   "varianten": [
    "Squircle-Avatar: border-radius: 50 % plus corner-shape: squircle, ohne Unterstützung ein Kreis",
    "Logo-Fahne mit gemischten Ecken: border-radius: 16px 0 0 16px; corner-shape: bevel round round bevel (CSS-Tricks)",
    "Radius-Tokens nur bei Unterstützung umschalten: @supports (corner-shape: squircle) { :root { --radius-md: 10px } } (utilitybend: 3, 4, 10, 14 px)",
    "Ticket oder Gutschein aus zwei Teilen mit scoop-Ecken an der Abrisskante",
    "Status-Tags mit notch, Themen-Tags mit bevel",
    "Hover-Morph am Button: bevel → squircle per transition",
    "Freie Formen mit border-shape (ab Chrome 147) und polygon(round …) (ab Chrome 150): Lernweg als Pfeilkette, Button als Wegweiser, Stern-Sticker, Sprechblase; Rahmen und Schatten folgen der Form, Rückfall clip-path"
   ],
   "umsetzung": "Zuerst das vollständige Design mit border-radius bauen. Dann ergänzen: @supports (corner-shape: squircle) { .avatar { corner-shape: squircle; } }. Squircles wirken kleiner als Kreisradien, deshalb den Radius etwas größer wählen. Pro Ecke: corner-shape: bevel round round bevel. Feinsteuerung mit superellipse(k): 1 ist round, 2 squircle, 0 bevel, -1 scoop. Die Werte interpolieren über ihre superellipse()-Entsprechung, deshalb lässt sich die Form animieren: .btn { border-radius: 18px; corner-shape: bevel; transition: corner-shape .3s cubic-bezier(.37, 0, .63, 1); } .btn:hover { corner-shape: squircle; }. Als Token neben --radius ein --corner führen.",
   "mobil": "Android-Chrome unterstützt corner-shape, iOS-Safari noch nicht. Dort greift die normale Rundung. Die Bedienung ändert sich nicht.",
   "reduzierte_bewegung": "Der Form-Morph ist dezent. Bei prefers-reduced-motion: reduce trotzdem transition: none setzen, die Form wechselt dann sofort.",
   "barrierefreiheit": "Rein visuell. Der Fokusring (outline) folgt der Form: Bei scoop und notch prüfen, dass er sichtbar bleibt. Tiefe Kerben dürfen die Klickfläche nicht verkleinern."
  },
  "geprueft": "01.11.2026",
  "notiz": "Kursseite des erfundenen Rheinknie Kolleg aus Basel (Rezept kurs-coaching-lernweg: Bricolage Grotesque, Onest, Shantell Sans, Markenton Sandsteinrot, Erfolgsgrün nur am Häkchen). Jedes Element hat eine eigene Eckenform: Squircle-Karte und -Avatar, Notch-Status-Tags, Bevel-Themen-Tags und Modul-Kacheln, zweiteiliges Scoop-Ticket, Bevel-Fahne im Logo, Sticker mit superellipse(-0.3). Der Umschalter wechselt zwischen Eckensprache, Alles Squircle und Nur Rundung (so sieht es Safari/Firefox); die Formen morphen dabei 400 ms. Hover oder Fokus zeigt die echten Werte des Elements, gelesen aus den Custom Properties. Ohne Unterstützung erscheint ein Hinweis. Die Vorführung fährt mit einem gezeichneten Zeiger über Button, Ticket und Sticker und schaltet die drei Varianten um. Kursbild ist eine eigene SVG-Skizze (Münster und Fähre). AD-Review 01.11.2026: Note 4 Varianten 01.11.2026: Umschalter „Variante“ (?v=basis|formen); in formen zusätzlich „Form / Rückfall“. Werte-Anzeige nennt je Element Technik und Form. Headless-Chromium 153 kann border-shape und polygon(round); Rückfall zusätzlich mit abgeschaltetem @supports geprüft. Zugang 02.11.2026: Grün „Gebucht“ #0b8a58 → #0b8455 (4,6:1 auf Weiß), Kontrastmodus-Rahmen für Knöpfe.",
  "varianten": [
   {
    "id": "basis",
    "name": "Eckensprache mit corner-shape",
    "wann": "Design-Systeme, Kurse, Apps, Tickets: jede Komponente bekommt eine eigene Eckenform (squircle, bevel, notch, scoop), border-radius bleibt der Rückfall. Unterumschalter: Eckensprache, Alles Squircle, Nur Rundung.",
    "werte": {
     "rezept": "kurs-coaching-lernweg",
     "kurve": "cubic-bezier(0.37, 0, 0.63, 1)",
     "wechsel_ms": 400,
     "hover_morph": "bevel → squircle, 300 ms",
     "einbindung": "@supports (corner-shape: squircle)"
    }
   },
   {
    "id": "formen",
    "name": "Freie Formen mit border-shape",
    "wann": "Wenn eine Form mehr als Ecken braucht: Lernwege und Schrittfolgen als Pfeilkette, Wegweiser-Buttons, Sticker, Sprechblasen, Tickets mit Spitze. Rahmen und Schatten folgen der Form. Greift ab Chrome 147 (gerundete Ecken ab 150), sonst clip-path.",
    "werte": {
     "technik": "border-shape: polygon(round <r>, …) in @supports (border-shape: polygon(round 1px, 0 0, 100% 0, 50% 100%)); clip-path: none; border-radius ignoriert",
     "ab": "border-shape Chrome 147, polygon() mit round Chrome 150 (Recherche, Chrome-Release-Notes); andere Browser: Rückfall",
     "rueckfall": "clip-path: polygon(…) mit geraden Ecken, ohne Rahmen und Schatten; Hinweiszeile im Pult; Umschalter „Rückfall“ zeigt ihn auch in Chrome",
     "pfeilkette": "Modul-Kacheln polygon(round 4px, 0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%), erste ohne Kerbe; Überlappung margin-left -8px bei gap 3px; Rahmen 1.5px rgba(20,20,20,.14); erstes Modul #c2412d",
     "wegweiser": "Button polygon(round 6px, 0 0, calc(100% - var(--spitze)) 0, 100% 50%, calc(100% - var(--spitze)) 100%, 0 100%); --spitze 14px → 24px bei Hover/Fokus, border-shape transition 300 ms; box-shadow 0 10px 22px -10px rgba(158,47,31,.7) folgt der Form",
     "stern": "Sticker 146 px, 24 Punkte (außen 50 %, innen 41 % → 35 % bei Hover), round 5px, Rahmen 2px #141414, box-shadow 0 6px 0 #141414, rotate -8deg → -2deg, 300 ms",
     "sprechblase": "Bildunterschrift polygon(round 10px, …) mit Zipfel 10px unten links, Rahmen 1.5px rgba(20,20,20,.5), Schatten 0 8px 18px -8px",
     "kurve": "cubic-bezier(0.37, 0, 0.63, 1)",
     "beobachtung": "border-shape interpoliert zwischen Polygonen gleicher Punktzahl (geprüft in Chromium 153)"
    }
   }
  ]
 }
}