Round corner box (Using css sprites)

This is the most common problem for a CSS beginner to create a round corner expandable box using CSS. This is a simple tutorial and its easy to understand.

To start with, first we understand HTML part which will have a container div which have relative positioned with four absolute-positioned divs inside, where the corner images are formed using a unique CSS Sprite.

1. Design Part

  1. Make a rounded rectangle in the image editor of your choice there are many graphics programs have a tool that will create rounded-off squares.
  2. Slice one corner and save it. copy it 3 times and rotate its pieces to get the other corners.
  3. Combined all these and compose an image with the four corners.

2. Html Part

Create a containing div named .rbox and add four divs that will create our corners. We shall give all of them a class of .corner and also a class according to their position.

<div id=”cbox” class=”rbox”><strong>Lorem ipsum sed aliquam

Sed lacus.</strong><br />

Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Phasellus pellentesque. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est. lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus augue. Fusce eget tellus ultrices ligula volutpat adipiscing. Aenean ligula lectus, vehicula in, dictum a, fermentum nec, felis. Nunc ac turpis in leo posuere imperdiet.

<div class=”corner tl”></div>

<div class=”corner tr”></div>

<div class=”corner bl”></div>

<div class=”corner br”></div>

</div>

DONE

3. CSS Part

My corners have a width and height of 13px. Here padding value depends on your corner width and height. The top-bottom padding must be equal and equivalent to the height of the corner. The left-right padding must be equal and equivalent to the width of the corner.

#cbox{ background-color:#ffefc3; padding:13px; margin:10px 0;}

#cbox .corner{ background-image:url(images/cimg.gif);}

.rbox{ position:relative;}

.corner{ position:absolute; width:13px; height:13px;}

.tl{ top:0; left:0;}

.tr{ top:0; right:0; background-position:-13px 0;}

.bl{ bottom:0; left:0; background-position:0 -13px;}

.br{ bottom:0; right:0; background-position:-13px -13px;}

If you want 1 px border around this, than there are a little change in style

.tl{ top:-1px; left:-1px;}

.tr{ top:-1px; right:-1px; background-position:-13px 0;}

.bl{ bottom:-1px; left:-1px; background-position:0 -13px;}

.br{ bottom:-1px; right:-1px; background-position:-13px -13px;}

Done

To download a demo file. Click here

* IE6 Issue

Thera is a compatibility issue with in IE 6 in using this technique. You must give the container (.rbox, or #cbox) a determined width and height. If you don’t define it, the box will look broken.

cheers!!!

Tags: , ,

This entry was posted on Monday, May 25th, 2009 at 2:18 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player