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
- 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.