CSS width Property


The CSS width property specifies the width of an element's content area. This 'content' area is the portion inside the padding, border, and margin of an element (the box model). The width property can be set using any length unit, such as pixels (px), ems (em), or percentages (%). The width property can be used to set the width of any HTML element, but it is most commonly used to set the width of block elements, such as <div> and <p> elements. Block elements are elements that start on a new line and take up the full width of their container.

Initial value
Applies to
All elements except non-replaced inline elements, table rows, and row groups
Computed value
Percentage or absolute length
JavaScript syntax

Interactive Demo

Example of the width css property


width: <length> | <percentage> | auto


  • <length>Specifies the width of the content area using a length unit.
  • <percentage>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
  • autoThe width depends on the values of other properties. See the sections below.
  • border-boxIf border-box is used, the length or percentage defined will be applied to the element's border box.
  • content-boxIf content-box is used, the length or percentage defined will be applied to the element's content-box.
  • autoIf auto is set for the elements width, the browser will determine the width for the element.
  • max-contentThe intrinsic preferred width
  • min-contentThe intrinsic minimum width
  • availableThe containing block width minus horizontal margin, border, and padding
  • fit-contentThis will be either the large of the minimum width or the smaller of the preferred width and the available width


<div class="layer1"> <p class="layer2">Lorem ipsum dolor sit amet,consectetuer adipiscing elit,seddiem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </div> 
.layer1 { 
   width: 300px;
   background: #fc0;
   padding: 7px; 
   border: 1px solid #ccc;
.layer2 { 
width: 400px; 

Browser Support

The following table will show you the current browser support for the CSS width property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023