Multiple Rounded Corner CSS Boxes Using a Single Image

By DCI5 mins read

In web designing, rounded corners play a vital role in various places. They not just look good but also allow one to create unique effects. There are many methods to achieve this effect. And, we have come up with a very simple, clean and reusable technique to create multi-sized rounded corner CSS boxes using a single image with drop shadow effects. In this short tutorial, we’ll explain you on how to achieve this effect with a simple example.

Before we proceed with this example, what we need is a basic knowledge in CSS and a solid colored background image with rounded corners. You can choose whatever color theme you want for the boxes and a drop shadow effect can be added to the image as given in this example.

In this example, we have created three CSS boxes in different sizes. After downloading the file, upload the CSS file to your server and add the path in the shown script.

<link href="css/styles.css" type="text/css" rel="stylesheet"/>

HTML

The HTML given here contains three div for each boxes assigned and other div for content and positioning of the boxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Multiple Rounded Corner CSS Boxes Using a Single Image - Example
</title>
	<link href="css/styles.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
	<!--Over All div Starts Here-->

	<div id="box1">
	<div class="box_top"><p class="top_right"></p></div>

	<div class="content">
	<p><b>Box1</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis ornare ultricies libero. Donec fringilla, eros at dapibus
fermentum, tellus tellus auctor erat, vitae porta magna libero
sed libero.
Mauris sed leo. Aliquam aliquam.<br><br> Maecenas vestibulum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare
ultricies libero.
Donec fringilla, eros at dapibus fermentum, tellus tellus auctor
erat, vitae porta magna libero sed libero.</p>
	</div>
	<div class="box_bottom"><p class="bottom_right"></p></div>
	</div>
	<div id="box2">
	<div class="box_top"><p class="top_right"></p></div>
	<div class="content">
	<p><b>Box2</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis ornare ultricies libero. Donec fringilla, eros at dapibus
fermentum, tellus tellus auctor erat, vitae porta magna libero
sed libero.
Mauris sed leo. Aliquam aliquam. Maecenas vestibulum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis ornare ultricies libero. <br><br>
Donec fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta magna libero sed libero.
Mauris sed leo. Aliquam aliquam. Maecenas vestibulum.</p>
	</div>
	<div class="box_bottom"><p class="bottom_right"></p></div>
	</div>
	<div id="box3">
	<div class="box_top"><p class="top_right"></p></div>
	<div class="content">
	<p><b>Box3</b><br>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis ornare ultricies libero.
Donec fringilla, eros at dapibus fermentum, tellus tellus auctor
erat, vitae porta magna libero sed libero.
Mauris sed leo. Aliquam aliquam. <br><br> Maecenas vestibulum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis ornare ultricies libero.
Donec fringilla, eros at dapibus fermentum, tellus tellus auctor
erat, vitae porta magna libero sed libero.
Mauris sed leo. Aliquam aliquam. Maecenas vestibulum. </p>
	</div>
	<div class="box_bottom">
	<p class="bottom_right"></p></div>
	</div>
</body>
</html>

CSS

Initially some basic CSS formatting has been given for the <body> and <p> tag.

body {
	margin:0;
	padding:0;
	font:12px arial;
}
p {
	margin:0;
	padding:0;
}

Here for Box1, the background image is applied in six positions such as left top, right top, left bottom, right bottom and in middle of left and right. After positioning, width and height for the box should be set based on the content and layout being used. Repeat the same for the other two boxes.

/* Box 1 */

#box1 {
	background:url(../images/box_bg.jpg) repeat-y;
	float:left;
	width:500px
}
#box1 .box_top {
	background:url(../images/box_bg.jpg) no-repeat left top;
	float:left;
	width:500px;
	height:30px;
	margin:0;
	padding:0;
}
#box1 .box_top p.top_right {
	background:url(../images/box_bg.jpg) no-repeat right top;
	float:right;
	width:30px;
	height:30px;
	margin:0;
	padding:0;
}
#box1 .content {
	background:url(../images/box_bg.jpg) repeat-y right -30px;
	float:left;
	margin:0 0 0 20px;
	padding-right:20px;
	width:460px;
}
#box1 .box_bottom {
	background:url(../images/box_bg.jpg) no-repeat left bottom;
	float:left;
	width:500px;
	height:30px;
	margin:0;
	padding:0;
}
#box1 .box_bottom p.bottom_right {
	background:url(../images/box_bg.jpg) no-repeat right bottom;
	float:right;
	width:20px;
	height:30px;
	margin:0;
	padding:0;
}

This single image technique is applicable for any number of rounded corner CSS boxes with varying sizes and colors.

The script used in this tutorial has been shortened to explain. If you have any doubts in implementing this functionality, drop in your queries in the Comments section.

Dot Com Infoway has created an example for multiple rounded corner CSS boxes using a single image with a drop shadow effect.

Multiple Rounded Corner CSS Boxes Using a Single Image

Latest Posts