CSS min-width Property

The min-width property sets the minimum width of an element. This property prevents the width property's value from becoming smaller than the value specified for min-width.

Meanwhile, the min-width property overrides width property and CSS max-width property.

The property takes a CSS length (px, pt, em, and so on), or a percentage.

Negative length values are illegal.
Initial Value 0
Applies to All elements, but non-replaced inline elements, table rows, and row groups.
Inherited No.
Animatable Yes. Width is animatable.
Version CSS2
DOM Syntax object.style.minWidth = "200px";

Syntax

min-width: none | length | initial | inherit;

Example of the min-width property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>

Result

CSS min-width Property

Here the minimum width of the element is 10cm:

Example of the min-width property specified in "cm":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: none;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: none:</h3>
    <span>Minimum width is set to none.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>

Values

Value Description Play it
auto The browser calculates and selects a min-width for the given element. Play it »
length Defines minimum width in px, pt, cm, etc. Default value is 0. Play it »
% Sets the minimum width in % of containing element. Play it »
initial Makes the property use its default value. Play it »
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 2.0+ 4.0+

Practice Your Knowledge

What is the functionality of the 'min-width' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?