#transparent borders

You have a well-designed header, footer and content, but somehow your main content doesn’t quiet "stand out". Well I fell into that category a few weeks ago. 

The idea

The idea is to have transparent borders and apply a nice little box shadow to the outer box, so it looks like glass.

So looks simple right ? just add

border: 10px solid transparent

and you're done right ? Wrong. It's a bit complex but to have transparent borders you need to set the

background-clip

to

padding-box

. But that's not all to achieve a glass-like effect, you need to make sure that the user knows the border of the box this can be achieved by applying a box shadow. So here's the final code :

#glass-border{ background: #fff; border: 10px solid transparent; background-clip: padding-box; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) }