Corpocrat Blog

How to design a rounded corner menu boxes in CSS?

Being a beginner in CSS coding, i have always struggled to design round corner
menu boxes in CSS. At last i found a very simple way to to accomplish this with
minimum lines of code in CSS. In this tutorial i am going to show you how to
design a round corner menu box with header. You will need photoshop to slice
images and a CSS editor.

Objectives

To design a expandable (in height) round corner box with a fixed width of 150px
with minimum lines of code. I mean one div, one h3 and one p block elements.
It should be light weight and fast loading (without using large size images).

Concept

First design the cornered menu box in imageready and make sure you have the
exact width. I am assuming that the box has fixed width of 150px with liquid
height. As the content expands, width will be constant and the box will expand
in height with respect to content.

The box will have 4 elements

div - will be main container
h3 - will be menu title header
p - will contain the content

Here is the main concept

1. Assign #roundbox the middle slice (middle.gif) and will
   repeat it along y. repeat-y
2. Assign h3 tag (top.gif) slice and it will be no-repeat.
   Its background position is top left
3. Assign p element the (bottom.gif) and it will be no-repeat.
   Its background position is bottom left.

Slicing

Design the menu box in photoshop and divide into 3 slices as shown below.

HTML code

Carefully observe the html code and how the div is placed as container for
all the block elements.

     <div id="roundbox">
      <h3>Menu Header</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>
     </div>

CSS Code

Carefully observe the CSS code and the important to note is the position of
background images.

#roundbox {
    float: left;
    width:150px;
    font-family: Arial, helvetica, sans-serif;
    font-size: 11px;
    background-image: url(mid.gif);
    background-position: bottom left;
    background-repeat: repeat-y;
    margin: 10px 5px;

}

#roundbox h3 {
  background-image: url(top.gif);
    background-repeat: no-repeat;
    background-position: top left;
    margin:0;
    color: #fff;
    text-align:center;
    padding: 5px;

}

#roundbox p {
   background-image: url(bottom.gif);
   background-repeat:no-repeat;
   background-position: bottom left;
   margin:0;
   padding: 5px;
}

Leave me a feedback if you find this tutorial useful.