Create Cross-Browser Sticker-Like DIVs with CSS3

Stickers in web designing are items that appears like sticker on your website. Usually, this is placed to make something stand out like announcements, notifications etc.

Here is a method to create a sticker like wrapper for your divs and containers without using images.

Actual Demo

IMAGE LESS STICKER-LIKE CSS

CSS Code

.sticker{
 margin: 10px;
 padding:5px;
 color:#ffffff;
 background-color: red;
 border: 5px solid #ffffff;
 -webkit-box-shadow: 0 3px 5px #333;
 -moz-box-shadow: 0 3px 5px #333;
 box-shadow: 0 3px 5px #333;
 -webkit-border-radius: 500px;
 -moz-border-radius: 500px;
 border-radius: 500px;
 text-align:center;
 width:200px;
 font-family: fantasy;
 text-shadow:black 0.1em 0.1em 0.2em;
 /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#3333330')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#333333');
}

Now to use it, simply add sticker to your class like this:

<div class="sticker">
 STICKER CSS
</div>