CSS3 overflow-x Property


Example

Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area:

div {
    overflow-x: hidden;
}

Try it yourself »

Definition and Usage

The overflow-x property specifies what to do with the left/right edges of the content - if it overflows the element's content area.

Tip: Use the overflow-y property to determine clipping at the top and bottom edges.

Default value: visible
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.overflowX="scroll" Try it


Browser Support

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

Property
overflow-x 4.0 9.0 3.5 3.0 9.5


CSS Syntax

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

Property Values

Value Description Play it
visible The content is not clipped, and it may be rendered outside the content box Play it »
hidden The content is clipped - and no scrolling mechanism is provided Play it »
scroll The content is clipped and a scrolling mechanism is provided Play it »
auto Should cause a scrolling mechanism to be provided for overflowing boxes Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Related Pages

HTML DOM reference: overflowX property



Color Picker

colorpicker