Conditional Border Radius with Modern CSS
Toggle the value of border-radius based on the container/screen size using a simple line of code.
.box {
border-radius: calc(sign(100cqi - 100%)*2rem);
}The default value is equal to 2rem. When the element is full width (its width equals the container width), the radius is set to 0. 100cqi will fallback to 100vw (screen width) if no container is defined.
Resize the screen or the container in the demo below to see the result:
See the Pen Conditional Border Radius by Temani Afif (@t_afif) on CodePen.
Related: ishadeed.com/article/conditional-border-radius
More CSS Tips
- Dynamic Tooltip Position with Anchor Positioning III Another idea of a tooltip following its anchor.
- Alignment in Anchor Positioning using position-area An interactive demo to understand how to control the alignment using the position-area property.
- Range Selection using Modern CSS A new way to select elements in a specific range using if() and sibling-index().
- 3D Box using Modern CSS Combining corner-shape and modern CSS features to create a 3D box.