The overflow property is used to tell the browser what to do with content that doesn’t fit in a box.

Overflow Properties

The most commonly used values for this property are as follows:

hiddenIt hides overflowing contentoverflow: hidden;
visibleThe content of an element flows out of the boxoverflow: visible;
scrollIt displays scrollbars whether or not any content is actually clipped.overflow: scroll;
autoIf the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.overflow: auto;

Overflow Example

Below examples will demonstrate the basic architecture of border


<!doctype html>  
        <style type="text/css">
          .overflow {
            background-color: #f5f2f0;
            width: 50%;
            height: 90%;
            overflow: scroll;
      <div class="overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>