Property Description

The overflow property specifies the behavior that occurs when an content overflows an element's box.

This property has the following syntax:

overflow: visible|hidden|scroll|auto|initial|inherit;

Property Values

Value	Description
visible	(default) The overflow is not clipped, but it reders outside of the element's box
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

The following example shows the basic use of this property:

div {
  width:100px;
  height:100px;
  overflow:scroll;
}

Chrome	Firefox	IE	Safari	Opera
1.0	1.0	4.0	1.0	7.0

The overflow-x property specifies whether or not to clip the left/right edges of the content - if it overflows the element's content area.

This property has the following syntax:

overflow-x: visible|hidden|scroll|auto|no-display|no-content|initial|inherit;

Value	Description
visible	(default) The overflow is not clipped
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content
no-display	Specifies that if the content does not fit in the content box, the whole box is removed
no-content	Specifies that if the content does not fit in the content box, the whole content is hidden
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

The following example shows the basic use of this property:

div
{
  overflow-x: hidden;
}

Chrome	Firefox	IE	Safari	Opera
4.0	3.5	9.0	3.0	9.5

The overflow-y property specifies whether or not to clip the top/bottom edges of the content - if it overflows the element's content area.

This property has the following syntax:

overflow-y: visible|hidden|scroll|auto|no-display|no-content|initial|inherit;

Value	Description
visible	(default) The overflow is not clipped
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content
no-display	Specifies that if the content does not fit in the content box, the whole box is removed
no-content	Specifies that if the content does not fit in the content box, the whole content is hidden
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

The following example shows the basic use of this property:

div
{
  overflow-y: hidden;
}

Chrome	Firefox	IE	Safari	Opera
4.0	3.5	9.0	3.0	9.5