Clipping Content Using CSS

by kirupa | 30 November 2011

Have questions? Discuss this HTML5 tutorial with others on the forums.

When designing your sites and applications, you will run into cases where you want some content to not go outside a particular boundary. The most common case is one where the content you are wishing to display is larger than the container you have available:

the container and some really large content

If you are not interested in displaying a scrollbar or making your container larger, you need to clip your content so that as much of it as possible fits inside your container nicely....as so:

the result of content getting clipped inside the container

[ you can see a live example here ]

This can easily be accomplished by using a technique known as clipping. Clipping is where the contents outside of a designated region are simply ignored. In our example, the designated region is the boundaries of the container, and any part of the image that went outside of its boundaries got clipped.

In this tutorial, you will learn how to clip content by setting a simple CSS property on the container.

The Overflow Property

The property that decides whether the contents of a container will be clipped or not is the overflow CSS property, and it takes one of the following values:

visible
hidden
scroll
auto
no-display
no-content
inherit

To turn clipping on with no scrollbars or anything else, the overflow property needs to be set to hidden. Let's work through an example.

Working Through an Example

Create a new HTML document, and copy/paste the following HTML and CSS into it:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"><title>Clipping Example</title>
<meta content="clip, boundary, example" name="keywords">
<meta content="An example showing how you can clip the contents to a boundary." name="description">

<meta content="Clipping Example" name="title">

<style>
p {
}

h1 {
}
body {
}
#imageContainer {
}
</style>

</head>

<body>
<h1>Clipping</h1>
<div id="imageContainer">
<img alt="a colorful circle" src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>

</body>

</html>

When you preview this in your browser, you will see something that looks as follows:

no clipping and it looks bad

[ the content has no respect for its older, wiser container ]

Let's look at this in greater detail. The markup that generates what you see above is:

<div id="imageContainer">
<img alt="a colorful circle" src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>

You have a div element with an id of imageContainer, and you have an img tag as its child that displays the image that you see.

Because we want the image's contents to be clipped by the parent div, the overflow property needs to be set to hidden on a CSS style that affects it. That can be done by adding overflow: hidden; to the style rule associated with the parent container, the style rule whose selector is #imageContainer:

#imageContainer {
}

Once you have made this change, go ahead and preview your HTML page in your browser again. Notice what your example looks like now:

content that is clipped

[ your content is now clipped ]

Your image is now fully contained inside the boundary defined by the imageContainer div element. Notice that even the rounded corners of the div are respected during clipping.

Things to Keep in Mind

The container whose style you wished to set the overflow property to hidden on needs to have some defined boundaries. In the example you saw here, the width and height of our div was fixed to 350 pixels and 200 pixels respectively.

If you don't specify a boundary, your container may take on whatever the size of the content is. This doesn't mean that default layout and resize behavior won't turn clipping on. Clipping will still work when whatever automatic width and height the browser specifies overrides the size of the content. For example, if you remove the width and height properties from the imageContainer style, resizing your browser after a certain point will force clipping:

clipping will happen eventually

[ the browser eventually forced your div to start clipping the content ]

The last thing to note is that, while much of this tutorial talks about clipping in the context of oversized content, clipping is useful for animated content that you want to keep contained inside a boundary as well.

Clipping Content Using CSS

The Overflow Property

Working Through an Example

Things to Keep in Mind

Related Topics

Need Help?

Share