Design for AISquircle corners
Squircle corners: a CSS card. Copy the rules, or the prompt that rebuilds it.
Superellipse corners
corner-shape: squircle where supported, plain rounded corners elsewhere.
CSS
.card-073 {
width: 280px;
padding: 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 28px;
font-family: system-ui,sans-serif;
color: #111827;
box-shadow: 0 8px 24px -8px rgba(0,0,0,.12);
transition: transform .2s
}
.card-073:hover {
transform: scale(1.02)
}
@supports (corner-shape:squircle) {
.card-073 {
corner-shape: squircle;
border-radius: 40px
}
}
.card-073 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-073 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #6b7280
}
HTML
<article class="card-073">
<h3>Superellipse corners</h3>
<p>corner-shape: squircle where supported, plain rounded corners elsewhere.</p>
</article>Prompt
Build a 280px white card with a 1px #e5e7eb border, 24px padding, soft shadow 0 8px 24px -8px rgba(0,0,0,.12) and iOS-style superellipse corners: default border-radius 28px as the fallback, and inside @supports (corner-shape: squircle) set corner-shape: squircle with border-radius 40px. 18px title, 14px #6b7280 text, and a gentle 1.02 scale on hover.