Master Rounded Corners with the Fab Four CSS Technique

Unlock the Power of Container-Dependent Styling

The world of CSS has come a long way in recent years, making it easier to vertically center a div. However, there are still some crucial features missing, like container-queries, which are only available under feature flags for some browsers. Today, we’re going to explore the Fab Four technique, a game-changer for applying styles based on container dimensions.

What is the Fab Four Technique?

This innovative approach uses CSS functions like min, max, calc, and clamp to calculate whether a specific CSS rule should be applied, taking into account the dimension of the container element rather than the device viewport.

A Real-World Example

Let’s take a look at a demo featuring card components wrapped in a resizable container. Our goal is to remove the border-radius of the cards when their container is less than 400px wide.

The Magic Behind the Code

At first glance, the border-radius calculation might seem strange, but let’s break it down into three parts:

• The min calculation: This is where we use the min function to determine the width of the container. We set width: 100% to expand the element to its full container width, ensuring that the calculation always returns the width of our container.
• The max calculation: This function takes the result from the min calculation and returns either a positive border radius or a negative number.
• The / DESIREDBORDERRADIUS calculation: This is an extended syntax to apply border-radius to an element, using a neat trick to avoid CSS parsing engine issues.

Comparison to Media-Queries

Unlike media-queries, which rely on the screen width, the Fab Four technique uses the container width to apply styles. This makes it perfect for scenarios where you need to style elements based on their container dimensions.

Reversing the Logic

The Fab Four technique can be applied in various scenarios, depending on your application requirements. For instance, you can invert the logic to apply a specific rule when the container width is less than a specific breakpoint.

Utilities and Mixins

To make life easier, we can extract SASS mixins or utility functions for CSS-in-JS libraries like styled-components. This way, you can implement the Fab Four technique without having to write complex code.

The Future of CSS

As the web continues to evolve, we can expect to see more features like container-queries implemented in most web browsers. Until then, techniques like the Fab Four will help us achieve specific application requirements.

Optimize Your Frontend Performance

Is your frontend hogging your users’ CPU? LogRocket can help you monitor and track client-side CPU usage, memory usage, and more for all of your users in production. Try it out for free today!