How to create a box with rounded corners in HTML and CSS

Boxes with rounded corners are quite popular in website design nowadays. There are several ways to create such rectangles with rounded corners. In this article we will describe two different methods of implementing a round-cornered box with HTML and CSS.

Creating a round-cornered box with a fixed width and a fixed height.

This is the simplest method. We create the image of a rounded box with fixed dimensions and then use the box image as a background for the container DIV. Additionally we use some CSS padding to ensure some space between the DIV content and the borders of the image.

Right-click on the box image and choose "Save As"
to save it locally on your disk.

The HTML and CSS code:

<div style="background-image: url('/sites/default/files/rounded_fixed.gif'); width: 228px; height: 160px; padding: 10px;">
	Some content. Some content. Some content.
	Some content. Some content. Some content.
	Some content. Some content. Some content.
</div>

The result:

Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.

Note: This is a quick way to implement a box with rounded rectangles. It works only if your box content is static, i.e. it does not change. In case your website updates the content of the box dynamically it is possible for the box content to overflow.

Creating a round-cornered box with a fixed width and a variable height.

With this method we create two separate images for the upper and lower parts of the box. Then we use a DIV container to hold the box content and a border attribute to draw the left and right borders of the box.

Right-click on the box parts and choose "Save As"
to save the images locally on your disk.

The CSS code:

<div style="width: 248px;">
	<div style="background-image: url('/sites/default/files/rounded_top.gif'); height: 20px;"></div>
	<div style="border-left: 2px solid #B5B5B5; border-right: 2px solid #B5B5B5; padding: 10px;">
		Some content. Some content. Some content.
		Some content. Some content. Some content.
		Some content. Some content. Some content.
	</div>
	<div style="background-image: url('/sites/default/files/rounded_bottom.gif'); height: 20px;"></div>
</div>

The result:

Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.

Notes: We have selected the width and the color of the content DIV borders so that they match the top and bottom border images. If you use different images for the top and bottom of the box, then you should adjust the CSS code for the border to match the new images.

This method is a bit more complex than the first one but it handles well boxes with dynamic content. With the increase or decrease of the content length the box expands and shrinks accordingly.
Also you may want to check our next article explaining how to create a box with round corners without using any additional images.