The max-width property specifies the maximum width to be used for an element.

  • Initial valuenone
  • Applies toAll elements except non-replaced inline elements and table elements
  • InheritedNo
  • MediaVisual
  • Computed valueThe percentage as specified or the absolute length or 'none'
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript
Formal syntax: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content | none

max-width: 200px;
max-width: 80%;
max-width: min-content;
max-width: max-content;
max-width: fit-content;
max-width: none;
  • <length>Specifies a fixed width. Negative values are not allowed.
  • <percentage>A percentage relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
  • max-contentThe max-content width or height.
  • min-contentThe min-content width or height.
  • availableThe containing block width or height minus margin, border, and padding.
  • fit-contentIf the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
  • noneThe width has no maximum value.
.class {
   max-width: 250px;

Click the button below to experiment with this property.

Give it a Try!


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.