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: max-content; width: min-content; width: fit-content(20em); width: auto; /* Global values */ width: inherit; width: initial; width: unset;
The width
property is specified as either:
- one of the following keyword values:
min-content
,max-content
,fit-content
,auto
. - a
<length>
or a<percentage>
.
Values
<length>
- Defines the width as an absolute value.
<percentage>
- Defines the width as a percentage of the containing block's width.
auto
- The browser will calculate and select a width for the specified element.
max-content
- The intrinsic preferred width.
min-content
- The intrinsic minimum width.
fit-content(<length-percentage>
)- Uses the fit-content formula with the available space replaced by the specified argument, i.e.
min(max-content, max(min-content, <length-percentage>))
.
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
Formal 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 |
Computed value | a percentage or auto or the absolute length
|
Animation type | a length, percentage or calc(); |
Formal syntax
auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage>
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 */ width: max-content; }
<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 */ width: min-content; }
<p class="minblue">The Mozilla community produces a lot of great software.</p>
Specifications
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 4The definition of 'width' in that specification. | Editor's Draft | |
CSS Box Sizing Module Level 3The definition of 'width' in that specification. | Working Draft | Added the max-content , min-content , fit-content keywords.
|
CSS Level 2 (Revision 1)The definition of 'width' in that specification. | Recommendation | Precises on which element it applies to. |
CSS Level 1The definition of 'width' in that specification. | Recommendation | Initial definition. |
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 1.5 |
|
Chrome
Full support 46 |
Edge
Full support 79 |
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
Full support 33 |
Safari iOS
Full support 12 |
Samsung Internet Android
Full support 5.0 |
fit-content
|
Chrome Full support 46 Full support 46 Full support 22 Prefixed' Implemented with the vendor prefix: -webkit- No support 1 — 48 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 3 Full support 3 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera Full support 33 Full support 33 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- No support 15 — 35 Alternate Name' Uses the non-standard name: |
Safari Full support 11 Full support 11 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- No support 1 — 48 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 46 Full support 46 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- No support 18 — 48 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 4 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android Full support 33 Full support 33 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- No support 14 — 35 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 11 Full support 11 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- No support 1.0 — 5.0 Alternate Name' Uses the non-standard name: |
max-content
|
Chrome Full support 46 Full support 46 Full support 22 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 66 Full support 66 Full support 3 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera
Full support 44 |
Safari Full support 11 Full support 11 Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android
Full support 46 |
Chrome Android
Full support 46 |
Firefox Android Full support 66 Full support 66 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
Full support 43 |
Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android
Full support 5.0 |
min-content
|
Chrome Full support 46 Full support 46 No support 1 — 48 Alternate Name' Uses the non-standard name: |
Edge
Full support 79 |
Firefox Full support 66 Full support 66 Full support 3 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera Full support 33 Full support 33 No support 15 — 35 Alternate Name' Uses the non-standard name: |
Safari Full support 11 Full support 11 Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android Full support 46 Full support 46 No support 1 — 48 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 46 Full support 46 No support 18 — 48 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 66 Full support 66 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android Full support 33 Full support 33 No support 14 — 35 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 5.0 Full support 5.0 No support 1.0 — 5.0 Alternate Name' Uses the non-standard name: |
|
Chrome Full support 22 Full support 22 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Alternate Name' Uses the non-standard name: |
Firefox Full support 3 Full support 3 Alternate Name' Uses the non-standard name: |
IE
No support No |
Opera Full support 15 Full support 15 Alternate Name' Uses the non-standard name: |
Safari Full support 6.1 Full support 6.1 Alternate Name' Uses the non-standard name: |
WebView Android Full support 4.4 Full support 4.4 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 25 Full support 25 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 4 Full support 4 Alternate Name' Uses the non-standard name: |
Opera Android Full support 14 Full support 14 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 6.1 Full support 6.1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 5.0 Full support 5.0 Alternate Name' Uses the non-standard name: |
Legend
- Full support
- Full support
- No support
- No support
- 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.
See also
- box model
height
box-sizing
min-width
,max-width
- The mapped logical properties:
block-size
,inline-size
width by Mozilla Contributors is licensed under CC-BY-SA 2.5.