CSS `overflow` Property

Example

Setting different overflow property values:

div.ex1 {
    overflow: scroll;
}

div.ex2 {
    overflow: hidden;
}

div.ex3 {
    overflow: auto;
}

div.ex4 {
    overflow: visible;
}

The overflow property specifies what happens if content overflows an element's box.

Default value:	visible
Inherited:	no
---	---
Version:	CSS2
---	---
JavaScript syntax:	object.style.overflow="scroll"
---	---

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

Property
overflow	1.0	4.0	1.0	1.0	7.0

Note: In X Lion (Mac OS), scrollbars are hidden by default and only appear when being used (even if "overflow: scroll" is set).

Value	Description
visible	Default. The content is not clipped and will be rendered outside the element's box.
hidden	The content is clipped and the rest of the content will be invisible.
scroll	The content is clipped, but the browser displays scrollbars to see the rest of the content.
auto	If the content is clipped, the browser displays scrollbars to see the rest of the content.
inherit	Specifies that the value of the overflow property should be inherited from the parent element.