Skip to main content
CSS Tip

Conditional Border Radius with Modern CSS

Toggle the value of border-radius based on the container/screen size using a simple line of code.

Conditional Border Radius with CSS

.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