CSS min-width property sets the minimum width of an element. By using this property, we prevent the width property's value from becoming smaller than the value specified for min-width.

Meanwhile, we must know that CSS 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.

CSS Syntax

min-width: length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
        div {
             min-width: 15%;
             background-color: orange;

        <div>We set the minimum width of this text as 15%.</div>


Here the result is:

Property Values

Value Descriptions
length It defines minimum width in px, pt, cm, etc.
% It defines minimum width in percent of the containing element.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Related articles