Beemuse Paper

Plain paper

Lifted corners

Raised box

Curled corners

Curled left corner

Curled right corner

Horizontal curves

Horizontal curve above

Horizontal curve below

Vertical curves

Vertical curve left

Vertical curve right

Usage

Use like a Bootstrap well (it stretches to fill any space, so place it inside something like BS grid columns for sizing). Relatively-positioned .paper element.

No IE7 support (no :before or :after pseudo-elements). Graceful IE8 fallback (gets padding and margin, plus color and sizing options).

Credit: Nicolas Gallagher (tweaked a fair bit)

HTML

<!-- Classic -->
<div class="paper">
    ...
</div>
<div class="paper paper-lift">
    ...
</div>
<div class="paper paper-raise">
    ...
</div>
<!-- Curled -->
<div class="paper paper-curl">
    ...
</div>
<div class="paper paper-curl-left">
    ...
</div>
<div class="paper paper-curl-right">
    ...
</div>

 

<!-- Horizontal curves -->
<div class="paper paper-curve-horiz">
    ...
</div>
<div class="paper paper-curve-above">
    ...
</div>
<div class="paper paper-curve-below">
    ...
</div>
<!-- Vertical curves -->
<div class="paper paper-curve-vert">
    ...
</div>
<div class="paper paper-curve-left">
    ...
</div>
<div class="paper paper-curve-right">
    ...
</div>

Designed and built with all the buzz in the world @itmustbe

Code licensed under the MIT License