Box Styling with CSS

Created: 09.01.2017 | Updated: 31.03.2020

Boxes are used all over the web and therefore styling them is cool stuff.

Simple Box

Let's start with a very simple box.

This is a very simple box.

Nothing special in there.

Radius and Shadow

Let's add a small radius to the corners and a bit of a shadow and it looks already pretty stylish.

This is a very simple box adding some radius and shadow.

Nothing special but pretty nice.

Stacked Effect

Let's add a small radius to the corners and a bit of a shadow and it looks already pretty stylish.

This box adds an inline shadow and a nice stacked effect.

Stylish

And now a very stylish and simple one.

This box adds an inline shadow and a nice stacked effect.

Google Style

Here the style Google uses sometimes for boxes.

This box adds an inline shadow and a nice stacked effect.

Multiple Cards

Showing two cards on a stack.

Click for scrolling;

Google Style Stacked

Here the style Google uses sometimes for boxes.


This is box 5.
This is box 4.
This is box 3.
This is box 2.
This is box 1.



Links

CSS Box Examples