How to create rounded corner box

Do you want a rounded corner box instead of the usual rectangular box to define the boundary of your column or section?

There appears to be several ways to do it. I am just not sure which is the best. Anyway, I got this method from spiffy box. Basically, the method uses an image file of the box for the purpose.

Since your column can be arbitrarily long, I decided to just insert a predefined box for the top and bottom part of the column. Then I defined a background color to similarly match the color of these boxes. Then you have to adjust the margin and padding values to place the box and content correctly.

In the CSS code:
/* define classes for the rounded corner boxes*/
.cssboxtop, .cssboxbot{
background: transparent url(your image file)no-repeat
padding:10px
}
.cssboxtop{
background-position:top;
margin-bottom:400px;
}
.cssboxbot{
background-position:bottom;
margin:0 -10px;
}
/* define a background color for the column*/
.sidebarL {
background-color:#9ECBFA;
margin:0 -10px;padding:0 10px
}

In the HTML code:
<div id="sidebar-wrapperL">
<div class="cssboxtop"><div class="cssboxbot">
<div class="sidebarL section" id="sidebarLL">
<h2>Susu Kacang Cafe</h2>
.
.
.
</div></div></div></div>