Conditional Border Radius In CSS

This CSS trick, documented by Ahmad Shadeed and originating from Facebook's codebase, dynamically adjusts an element's border-radius based on its width relative to the viewport. The magic happens in a single line of CSS:

.card {
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}

The core logic compares 100vw (viewport width) with 100% (element width). Normally, the border-radius is 8px. However, when the element's width approaches the viewport width (within a tolerance of approximately 4px), the calculation results in a negative value. The max(0px, ...) and min(8px, ...) functions, combined with the large multiplier (9999), ensure a crisp toggle between 0px and 8px border-radius, eliminating any intermediate values. Removing the multiplier (9999) demonstrates a gradual transition as the element's width nears the viewport width.

This approach offers advantages over @media queries:

• Container-aware: Unlike media queries which rely on fixed viewport widths, this technique dynamically responds to the element's width relative to the viewport, acting as a form of container query. It doesn't need to know the card's size beforehand. A media query would be dependent on that pre-defined width.

• Versatility: This "Fab Four" technique (as it's sometimes called) is particularly useful in email development and other contexts where precise control over layout responsiveness is crucial.

The developers highlight its superior adaptability compared to media queries, making it a powerful tool for responsive design scenarios.

The above is the detailed content of Conditional Border Radius In CSS. For more information, please follow other related articles on the PHP Chinese website!