Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to create a box with round corners without using any images

In our previous article we explained how to create a box with rounded corners with the help of a few images for the round corners. Now we will explain how to create the same box but without using any helper images.

We will be using several helper DIVs to shape the round corners. The following scheme explains the location and purpose of each DIV:

Scheme of round corners

As you can see the parts of the box that correspond to rounded corners have been split into lines and each line has its own DIV element and a CSS style for that DIV element. We use different margin values for the different DIV elements in order to shape the curve of the corners and to set the box borders we use the border CSS property. Here is the resulting HTML and CSS code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.round_corners .line_1,
.round_corners .line_2,
.round_corners .line_3,
.round_corners .line_4,
.round_corners .line_5 {
	line-height: 0px;
	font-size: 1px;
	overflow: hidden;
}

.round_corners .line_1 {
	margin-left: 6px;
	margin-right: 6px;
	background-color: black;
	height: 1px;
}

.round_corners .line_2 {
	margin-left: 4px;
	margin-right: 4px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	height: 1px;
}

.round_corners .line_3 {
	margin-left: 3px;
	margin-right: 3px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 1px;
}

.round_corners .line_4 {
	margin-left: 2px;
	margin-right: 2px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 1px;
}

.round_corners .line_5 {
	margin-left: 1px;
	margin-right: 1px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 2px;
}

.round_corners .content {
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding: 10px;
}
</style>
</head>
<body>
<div class="round_corners">
	<div class="line_1"></div>
	<div class="line_2"></div>
	<div class="line_3"></div>
	<div class="line_4"></div>
	<div class="line_5"></div>
	<div class="content">Content</div>
	<div class="line_5"></div>
	<div class="line_4"></div>
	<div class="line_3"></div>
	<div class="line_2"></div>
	<div class="line_1"></div>
</div>
</body>
</html>

You can increase the number of DIVs and their corresponding classes in order to make the rounded angles finer-looking at the cost of more HTML markup. Or if you want you can decrease the number of lines from 6 to 5 or less to decrease the amount of HTML markup.