Design for AISquircle-Ecken
Squircle-Ecken: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Baue eine 280px weiße Card mit 1px #e5e7eb Rahmen, 24px Padding, weichem Schatten 0 8px 24px -8px rgba(0,0,0,.12) und Superellipsen-Ecken im iOS-Stil: standardmäßig border-radius 28px als Fallback, und innerhalb von @supports (corner-shape: squircle) corner-shape: squircle mit border-radius 40px setzen. 18px Titel, 14px #6b7280 Text und eine sanfte 1.02 Skalierung beim Hover.