Round corner side boxes

Last Updated on Wednesday, 04 November 2009 15:00 Written by Jerome Heuze Wednesday, 04 November 2009 14:16

I will provide the graphics,CSS and HTML for creating side boxes with round corners expandable verticaly up to 300px with a fixed width of 180px.

Creating the images

I have used Adobe Fireworks to create the graphics. One base graphic called boxbase.png and 3 colored headers named header-bg-grey.png, header-bg-blue.png and header-bg-orange.png.

	Filename: boxbase.png Size: 1kb Dimensions: 180x300px
	Filename: header-bg-grey.png Size: 1kb Dimensions: 180x20px
	Filename: header-bg-blue.png Size: 1kb Dimensions: 180x20px
	Filename: header-bg-orange.png Size: 1kb Dimensions: 180x20px

Download all graphics (Save as) [.zip]

HTML code

Example HTML for grey header (default)

<div class="sidebar"> 
	<h2>Box Title</h2>
    <div class="sidebarBlock">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent nec tellus sem. Suspendisse potenti. Praesent tempor leo eu
tellus venenatis sit amet vestibulum felis dapibus.</p>
    </div>
</div>

Example HTML for blue header

<div class="sidebar blueheader"> 
	<h2>Box Title</h2>
    <div class="sidebarBlock">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent nec tellus sem. Suspendisse potenti. Praesent tempor leo eu
tellus venenatis sit amet vestibulum felis dapibus.</p>
    </div>
</div>

Example HTML for orange header

<div class="sidebar orangeheader"> 
	<h2>Box Title</h2>
    <div class="sidebarBlock">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent nec tellus sem. Suspendisse potenti. Praesent tempor leo eu
tellus venenatis sit amet vestibulum felis dapibus.</p>
    </div>
</div>

CSS Code

.sidebar { width: 180px; }
.sidebar p { margin: 0px; font-family:Arial, sans-serif; font-size:12px }
.sidebarBlock { 
background: url('/img/boxbase.png') 0 100% no-repeat;
margin-bottom: 20px;
padding: 10px;
}
.sidebar h2 {
background: url('/img/header-bg-grey.png') top left no-repeat;
margin: 0px;
padding: 5px 0px 2px 10px;
color: #000;
text-transform: uppercase;
font: bold .8em/100% Arial, sans-serif;
}
.blueheader h2 {
background: url('/img/header-bg-blue.png') top left no-repeat;
margin: 0px;
padding: 5px 0px 2px 10px;
color: #fff;
text-transform: uppercase;
font: bold .8em/100% Arial, sans-serif;
}
.orangeheader h2 {
background: url('/img/header-bg-orange.png') top left no-repeat;
margin: 0px;
padding: 5px 0px 2px 10px;
color: #fff;
text-transform: uppercase;
font: bold .8em/100% Arial, sans-serif;
}