CSS width Property

❮ Previous Reference Next ❯


.example1 {
  width: auto;

.example2 {
  width: 50px;

.example3 {
  width: 50%;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


The width property sets the width of an element’s content region (excluding padding, border, and margin).

Note: The min-width and max-width properties override the width property.

Note: 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.

Default value:auto
JavaScript syntax:

Standard Syntax

width: auto|length|percentage|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
auto This is default value. The browser will calculate the width for the specified element on the basis of the values of other properties.
length Specifies the width as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Specifies the width in percentage. The percentage is calculated with respect to the width of the element's containing block. Negative percentage values are not allowed.
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, )).
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  width: auto;
❮ Previous Reference Next ❯