Trucos CSS
CSS Trick

CSS corner-shape

Squircle, bevel, scoop, and notch corners without SVG or masks.

#css #shapes #experimental #corners

Browser Support

✓ Chrome 128+ ✗ Firefox ✗ Safari ✗ Edge

CSS corner-shape

Go beyond rounded corners with new shape options.

.card {
  border-radius: 50px;
  corner-shape: squircle; /* iOS-style */
}

Available values: round (default), squircle, bevel, scoop, notch

Live Demo

Corner Shapes
EXPERIMENTAL
12px
CSS Code
.corner-demo {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
.corner-item {
text-align: center;
}
.corner-box {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}
.corner-round {
border-radius: 12px;
}
.corner-squircle {
border-radius: 16px;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.corner-bevel {
clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
}
.corner-label {
margin: 0.5rem 0 0 0;
font-size: 0.65rem;
opacity: 0.6;
}

Currently experimental - use as progressive enhancement.

Comparte este CSS trick

Comentarios