The width
CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing
is set to border-box
, it sets the width of the border area.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The min-width
and max-width
properties override width
.
Syntax
/* <length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /* Keyword values */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* Global values */ width: inherit; width: initial; width: unset;
The width
property is specified as either:
- one of the following keyword values:
available
,min-content
,max-content
,fit-content
,auto
. - a
<length>
or a<percentage>
. This might optionally be followed by one of the following keywords:border-box
,content-box
.
Values
<length>
- Defines the width as an absolute value.
<percentage>
- Defines the width as a percentage of the containing block's content width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.
border-box
- If present, the preceding
<length>
or<percentage>
is applied to the element's border box. content-box
- If present, the preceding
<length>
or<percentage>
is applied to the element's content box. auto
- The browser calculates and selects a width for the specified element.
fill
- Use the
fill-available
inline size orfill-available
block size, as appropriate to the writing mode. max-content
- The intrinsic preferred width.
min-content
- The intrinsic minimum width.
available
- The containing block width minus horizontal margin, border, and padding.
fit-content
- The larger of:
- the intrinsic minimum width
- the smaller of the intrinsic preferred width and the available width
Formal syntax
[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
Examples
Default width
p.goldie { background: gold; }
<p class="goldie">The Mozilla community produces a lot of great software.</p>
Pixels and ems
.px_length { width: 200px; background-color: red; color: white; border: 1px solid black; } .em_length { width: 20em; background-color: white; color: red; border: 1px solid black; }
<div class="px_length">Width measured in px</div> <div class="em_length">Width measured in em</div>
Percentage
.percent { width: 20%; background-color: silver; border: 1px solid red; }
<div class="percent">Width in percentage</div>
max-content
p.maxgreen { background: lightgreen; width: intrinsic; /* Safari/WebKit uses a non-standard name */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ }
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
min-content
p.minblue { background: lightblue; width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */ }
<p class="minblue">The Mozilla community produces a lot of great software.</p>
Accessibility concerns
Ensure that elements set with a width
aren't truncated and don't obscure other content when the page is zoomed to increase text size.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification. |
Working Draft | Added the max-content , min-content , available , fit-content keywords. |
CSS Transitions The definition of 'width' in that specification. |
Working Draft | Lists width as animatable. |
CSS Level 2 (Revision 1) The definition of 'width' in that specification. |
Recommendation | Precises on which element it applies to. |
CSS Level 1 The definition of 'width' in that specification. |
Recommendation | Initial definition. |
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 | a percentage or auto or the absolute length |
Animation type | a length, percentage or calc(); |
Canonical order | the length or percentage before the keyword, if both are present |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
width | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Animatable | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | IE Full support 11 | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support 4.4 | Chrome Android Full support 26 | Firefox Android Full support 16 | Opera Android Full support 14 | Safari iOS Full support 6.1 | Samsung Internet Android Full support Yes |
border-box | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
content-box | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
fill | Chrome Full support 46 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 33 | Safari Full support 12 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android No support No | Opera Android ? | Safari iOS Full support 12 | Samsung Internet Android Full support 5.0 |
fit-content | Chrome
Full support
46
| Edge No support No | Firefox
Full support
3
| IE No support No | Opera
Full support
33
| Safari
Full support
11
| WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android
Full support
4
| Opera Android ? | Safari iOS
Full support
11
| Samsung Internet Android
Full support
5.0
|
max-content | Chrome
Full support
46
| Edge No support No | Firefox
Full support
66
| IE No support No | Opera Full support 44 | Safari
Full support
11
| WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android
Full support
66
| Opera Android Full support 43 | Safari iOS
Full support
11
| Samsung Internet Android Full support 5.0 |
min-content | Chrome
Full support
46
| Edge No support No | Firefox
Full support
66
| IE No support No | Opera Full support 44 | Safari
Full support
11
| WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android
Full support
66
| Opera Android Full support 43 | Safari iOS
Full support
11
| Samsung Internet Android Full support 5.0 |
stretch | Chrome
Full support
22
| Edge No support No | Firefox
Full support
3
| IE No support No | Opera
Full support
15
| Safari
Full support
6.1
| WebView Android
Full support
4.4
| Chrome Android
Full support
25
| Firefox Android
Full support
4
| Opera Android ? | Safari iOS
Full support
6.1
| Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.