Corner Shape Squircle

DEMO

<div class="demo-stage csh-stage">
  <div class="csh-tile" id="csh-tile"></div>
  <fieldset class="csh-pick">
    <legend class="csh-legend">corner-shape</legend>
    <label class="csh-opt"><input type="radio" name="csh" value="round"> round</label>
    <label class="csh-opt"><input type="radio" name="csh" value="squircle" checked> squircle</label>
    <label class="csh-opt"><input type="radio" name="csh" value="scoop"> scoop</label>
    <label class="csh-opt"><input type="radio" name="csh" value="bevel"> bevel</label>
    <label class="csh-opt"><input type="radio" name="csh" value="notch"> notch</label>
  </fieldset>
  <button type="button" class="csh-cta">Get started</button>
  <p class="csh-note">このブラウザは corner-shape に未対応のため、普通の角丸で表示しています</p>
</div>

.csh-stage { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; padding:2rem 1.25rem; background:#0B0B10; min-height:360px; }
.csh-tile { display:flex; align-items:center; justify-content:center; width:140px; height:140px; border-radius:40px;
  background:linear-gradient(135deg,#7B37A8,#D1177A); color:#fff; font-family:ui-monospace,monospace; font-size:.85rem;
  corner-shape: squircle;
  transition: corner-shape .6s cubic-bezier(.22,1,.36,1); }
.csh-tile::before { content:"squircle"; }
.csh-stage:has(input[value="round"]:checked) .csh-tile::before { content:"round"; }
.csh-stage:has(input[value="scoop"]:checked) .csh-tile::before { content:"scoop"; }
.csh-stage:has(input[value="bevel"]:checked) .csh-tile::before { content:"bevel"; }
.csh-stage:has(input[value="notch"]:checked) .csh-tile::before { content:"notch"; }
.csh-stage:has(input[value="round"]:checked) .csh-tile { corner-shape: round; }
.csh-stage:has(input[value="scoop"]:checked) .csh-tile { corner-shape: scoop; }
.csh-stage:has(input[value="bevel"]:checked) .csh-tile { corner-shape: bevel; }
.csh-stage:has(input[value="notch"]:checked) .csh-tile { corner-shape: notch; }
.csh-pick { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; margin:0; padding:0; border:0; max-width:420px; }
.csh-legend { width:100%; margin-bottom:.4rem; color:#A1A1AA; font-size:.75rem; font-family:ui-monospace,monospace; text-align:center; }
.csh-opt { display:inline-flex; align-items:center; gap:.3rem; min-height:44px; padding:0 .75rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); color:#EDEDED; font-size:.78rem; font-family:ui-monospace,monospace; cursor:pointer; }
.csh-opt:has(:checked) { border-color:#F472B6; color:#F9A8D4; }
.csh-opt:has(:focus-visible) { outline:2px solid #fff; outline-offset:2px; }
.csh-opt input { accent-color:#D1177A; margin:0; }
/* 押すと squircle から notch へ変わるボタン */
.csh-cta { min-height:48px; padding:0 1.6rem; border:0; border-radius:16px; background:#D1177A; color:#fff; font:inherit; font-weight:600; font-size:.92rem; cursor:pointer;
  corner-shape: squircle; transition: corner-shape .35s ease, scale .15s; }
.csh-cta:hover, .csh-cta:focus-visible { corner-shape: superellipse(4); }
.csh-cta:active { corner-shape: notch; scale:.97; }
.csh-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.csh-note { display:none; margin:0; color:#FCD34D; font-size:.76rem; text-align:center; }
@supports not (corner-shape: squircle) {
  .csh-note { display:block; }
}
@media (prefers-reduced-motion: reduce) {
  .csh-tile, .csh-cta { transition:none; }
}

AI PROMPT

CSS の corner-shape で、角の形が squircle・scoop・bevel・notch に変わるデモを作って。140px 四方のタイルに border-radius:40px を付け（corner-shape は border-radius で丸めた範囲の形を変えるので、border-radius が無いと効かない）、corner-shape: squircle を初期値にする。fieldset と legend で囲んだ5つのラジオボタン（round・squircle・scoop・bevel・notch・各ラベルは高さ44px 以上）を置き、親の :has(input[value="scoop"]:checked) のような指定でタイルの corner-shape と、タイルの中に ::before で出す値の名前を切り替える。transition: corner-shape .6s を付けると、キーワードに対応する superellipse() の値の間で形が滑らかに移り変わる。その下に Get started のボタンを置き、普段は squircle、ホバーとフォーカスで superellipse(4)（より四角に近い角）、押している間は notch（切り欠き）と scale(.97) にする。未対応ブラウザでは corner-shape が無視されて普通の角丸になるので、@supports not (corner-shape: squircle) の時だけ注記を表示する。prefers-reduced-motion: reduce の時は transition を無効化する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。