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.


Flying Saucer Banner (huge border-radius)


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.


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


Display Box Caption
Content area of Display Box. This display box looks like one unified structure. But it's really just two DIV blocks stacked on top of each other. Since DIV blocks have no margins by default, they stack with no seams in between. It's made to look like one strucure since the border of the bottom block matches the background color of the top block.


Recall the default behavior of blocks.
Blocks expand horizontally (← →) as much as they can.
But blocks shrink vertically (↑) as much as the content (and padding) in the block will allow. All the examples above show that.
If you add more content to a block, it will automatically expand vertically to accommodate it. The default vertical behavior is usually the best choice unless you have a particular reason why you need a fixed-height block.

But the min_height CSS property can be useful in some cases because it allows you to set a minimum height for a block, but still lets the block grow downward if content is added that exceeds the min-height. This block has a min-height which is why the block has more height than necessary for the content.

One common use for this is for the main content area of a page that doesn't have much content. In that case, the page footer might be in the middle of the page. Using min-height can move the footer block down where it should be, but still lets the content area expand when more content is added, pushing the footer block downward.