Styling Blocks - Some examples on typical styling techniques for blocks.

All the examples below apply to any HTML block element, not just div blocks.

Rounded corners are created with the CSS border-radius property.

The W3Schools border-radius page has more info, like how to apply different curvatures for different corners of the same block.


Shadows are created with the CSS box-shadow property.

The W3Schools box-shadow page has more info on the different ways you can control the shadow. All the different values you can set for the shadow are confusing. Playing with the "Play It" buttons in their Property Values section helps.


You can create cool effects like using a border only on one side if you use your imagination.


By default, a block will grow in height as you add more content to it. It automatically expands downward to accomodate more content. This is usually the best choice unless you have a particular reason why you need a block to always be a certain height regardless of it's content.

The min_height property is useful because it allows you to set a minimum height for a block, but still lets the block expand downward if it's content exceeds the min-height. This is useful for the main content block of a page layout, for example, because a min-height can make the content area tall enough to push the footer block down toward the bottom of the browser window even if there isn't much content. But if more content is added, then main content area will simply expand downward, pushing the footer block downward below it.

This block has a min-height which is why the block has more height than necessary for the content.


The default behavior for a block is usually the best choice, or perhaps a min_height. But there are cases where you have to give a block a fixed height like this one.

Block overflow for fixed height blocks is controlled with the CSS overflow property, which you can read more about in the W3Schools Overflow page.

This block is set to overflow: auto; so the browser automatically adds scroll bars to the block if needed. Setting overflow: scroll; always gives the block scroll bars even if not needed, but auto is usually a better choice.

If you remove the Lorem ipsum text below and refresh the page, you will see the browser automatically remove the scroll bar.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Cras dapibus. What the cras? Just adding some extra cras!


This block demonstrates the default behavior for overflow in a fixed height block. You can obviously see why is best to use CSS to control overflow.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Cras dapibus. What the cras? Just adding some extra cras!