CSS min-width Property

The min-width property sets the minimum width of an element.

It prevents an element from becoming any smaller than the specified value.

Example

#

An element with a 500-pixel min-width value. Resize the browser and the element will not get any smaller than the min-width.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter.
<style>
  .min {
    border: 1px solid tomato;
    padding: 15px;
    min-width: 500px;
  }
</style>

<div class="min">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as
  a painter.
</div>    

Syntax

min-width: length | initial | inherit;

Values

#

Value Description
length Sets the minimum width. Use any valid CSS length value.
% Sets the minimum width in percent.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when min-width support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
7.0 Oct 2006
Opera
4.0 Jun 2000
Safari
2.0.2 Oct 2005

You may also like

Guides