Fancy CSS Content Box

Strictly for beginners only, if you are a CSS guru you probably know how to make a better css content box.

This tutorial will be pretty straight forward, there isn’t any real css tricks or hacks involved. But I really like the simplicity of this css content box and I thought I’d share this with all the aspiring designers out there. What you see above is actually a div with an image of a folded corner otherwise known as dogear for obvious reasons.

Here’s what the dogear image looks like by itself, as you can probably tell this image will be sitting on the upper right corner of our content box. Let’s do some basic coding, here is the css code for our content box.

div.contentbox{
    background: #F7F7F7 url('images/dogear.jpg') no-repeat;
    background-position:100% 0%;
    border:1px dotted #ccc;
    padding:30px}

That’s basically it, we have a CSS class for our content box. I told you this was straight-forward! And now let’s take a look at the html code:

  <div class="contentbox">

    Blah blah blah the contents will be placed here...blah blah blah..
  </div>

Pretty simple right??? Of course you can place the dogear on any of the corners by playing around with the CSS class for that image.

*NOTE ~ This was tested on Firefox 3, IE6, IE8, and Opera not sure how it would look on Safari.