We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS



The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

The min-width and max-width properties override width.

  • Initial value auto
  • Applies to all elements but non-replaced inline elements, table rows, and row groups
  • Inherited no
  • Percentages refer to the width of the containing block
  • Media visual
  • Computed value the percentage or auto as specified or the absolute length
  • Animatable yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • Canonical order the length or percentage before the keyword, if both are present


Formal syntax: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto
width: 300px        /* <length> values */
width: 25em

width: 75%          /* <percentage> values */

width: border-box   /* Keyword values */
width: content-box
width: max-content
width: min-content
width: available
width: fit-content
width: auto

width: inherit


See <length> for possible units.
Specified as a <percentage> of containing block's width.
If present, the preceding <length> or <percentage> is applied to the element's border box.
If present, the preceding <length> or <percentage> is applied to the element's content box.
The browser will calculate and select a width for the specified element.
The intrinsic preferred width.
The intrinsic minimum width.
The containing block width minus horizontal margin, border and padding.
The larger of:
  • the intrinsic minimum width
  • the smaller of the intrinsic preferred width and the available width
Note: WebKit implements an earlier version of this value, under the name intrinsic, but as of June 2012, implements fit-content as well.


table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }

View the live example

p { background: gold }

The Mozilla community produces a lot of great software.

p {
  background: lightgreen;
  width: intrinsic;			/* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;	/* Firefox/Gecko */

The Mozilla community produces a lot of great software.

p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.


Specification Status Comment
CSS Basic Box Model Working Draft Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS Transitions Working Draft Lists width as animatable.
CSS Level 2 (Revision 1) Recommendation Precises on which element it applies to.
CSS Level 1 Recommendation Initial specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
Animatability ? 16.0 (16.0) ? ? ?
max-content 22 -webkit 3.0 (1.9)-moz ? ? 2.0 (421) (intrinsic value)
min-content 22 -webkit 3.0 (1.9) -moz ? ? ?
available 22 -webkit 3.0 (1.9) -moz ? ? ?
fit-content 22 -webkit 3.0 (1.9) -moz ? ? ?
border-box and content-box Not supported Not supported Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

Document Tags and Contributors

Last updated by: Anonymous,