Core Code
Core Code Modern Dev Handbook

Clamp Responsive Width

clamp() keeps width within a safe range.

Preview

Code

<style>
.box{
width:clamp(200px, 50%, 600px);
background:#8b5cf6;
height:60px;
}
</style>

<div class="box"></div>

More CSS Math Functions Examples (8)

example CSS calc() Basic open example example CSS calc() Height open example example CSS calc() Columns open example example CSS min() Function open example example CSS max() Function open example example CSS clamp() Text Size open example example calc() with Padding open example example calc() Margin Center open example