Design for AIEsquinas squircle
Esquinas squircle: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Construye una tarjeta blanca de 280px con borde 1px #e5e7eb, padding 24px, sombra suave 0 8px 24px -8px rgba(0,0,0,.12) y esquinas superelipse estilo iOS: border-radius 28px por defecto como fallback, y dentro de @supports (corner-shape: squircle) fija corner-shape: squircle con border-radius 40px. Título 18px, texto 14px #6b7280, y una escala suave de 1.02 en hover.