# Day 33: Mathematical expressions in min(), max(), clamp()

DevFeed: [Day 33: Mathematical expressions in min(), max(), clamp()](<https://devfeed.tech/articles/day-33-mathematical-expressions-in-min-max-clamp-52201.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2022/100daysof-day33>)

Author: Manuel Matuzović

Published: 2022-11-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [calc](<https://devfeed.tech/tags/calc.md>), [clamp](<https://devfeed.tech/tags/clamp.md>), [complex](<https://devfeed.tech/tags/complex.md>), [css](<https://devfeed.tech/tags/css.md>), [custom-properties](<https://devfeed.tech/tags/custom-properties.md>), [function](<https://devfeed.tech/tags/function.md>), [functions](<https://devfeed.tech/tags/functions.md>), [max](<https://devfeed.tech/tags/max.md>), [min](<https://devfeed.tech/tags/min.md>)

## AI overview

A CSS tutorial explaining that min(), max(), and clamp() accept full mathematical expressions without requiring calc(). It also demonstrates using custom properties and complex expressions in CSS declarations.

## Source excerpt

You can use full math expressions in the comparison functions min(), max(), and clamp(). There's no need to nest a calc() function inside. Writing... div { border: max(20px, calc(1vw + 10px)) solid; } ...is the same as writing... div { border: max(20px, 1vw + 10px) solid; } You can also use custom properties. .var { --extra: 10px; border-width: max(20px, 1vw + var(--extra)); } Complex expressions are also possible. div { width: clamp(50px * 4 * 1.5, (100% / 2) * 2, 400px * 2); } My blog doesn't support comments yet, but you can reply via blog@matuzo.at.