CSS min-width property

It is used to set the minimum width of the element's content box. It means that the width of the content box can be greater than the min-width value, but cannot be shorter. It sets the lower bound on the element's width.

It will be applied when the content is smaller than the minimum width; otherwise, if the content is larger, this property has no effect. This property ensures that the value of CSS width property cannot be less than the value of min-width property. It does not allow negative values.

Syntax

The values of this CSS property are defined as follows:

none: It is the default value that does not limit the width of the content box.

length: This value defines the length of min-width in px, cm, pt, etc.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of using this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the minimum-width of these paragraphs using the length value of min-width property. The minimum width of the first paragraph is 425px, the second paragraph is 22em, the third paragraph is 220pt, and the minimum width of the fourth paragraph is set to initial.

Output