The clamp() Function

Clamps a value between an upper and lower bound anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is required. It takes 3 parameters: a minimum value, a preferred value, and a maximum value.

Syntax for clamp()

	Syntax
CSS	clamp( <calc-sum>#{3} ), where <calc-sum> = "<calc-product> [ [ '+' | '-' ] <calc-product> ]*", <calc-product> = "<calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*", and <calc-value> = "<number> | <dimension> | <percentage> | ( <calc-sum> )"

Notes

• Note that the '+' and '-' operators must always be surrounded by whitespace, while the '*' and '/' operators do not require whitespace (but it is recommended for consistency).

Recommended Links

• CanIUse.com: Search "clamp()" (compatibility information)
• CanIEmail.com: Search "clamp()" (email client compatibility information)

Search Engine Links (for more information)

• Bing "CSS clamp function"
• Google "CSS clamp function"