CSS max-width Property

The max-width property sets the maximum width of an element.

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

Example

#

An element with a 500-pixel max-width value. Resize the browser and the element will never get any larger than the max-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>
  .max {
    border: 1px solid tomato;
    padding: 15px;
    max-width: 500px;
  }
</style>

<div class="max">
  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

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

Values

#

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

More examples

An element with a 50% maximum width.
Resize the browser to see that it remains 50% of the container.

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>
  .max-width {
    border: 1px solid steelblue;
    padding: 15px;
    max-width: 50%;
  }
</style>

<div class="max-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.
</div>    

Browser support

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

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
7.0 Oct 2006
Opera
7.0 Jan 2003
Safari
2.0.2 Oct 2005

You may also like

Guides