Rounded Corner Elements in HTML Using CSS And Images With Variable Width and Height

There are many ways to make rounded corners in HTML. Many of the new browsers support CSS styles to make rounded corners especially the ones that support CSS 3.0. This post show how you could make rounded corners with CSS 2.0 and Images. The images are the four corners of the rounded box. The bigger the radius of the corners the bigger the corner image have to be. The technique is appropriate for making graphical containers with rounded corners that cannot be achieved by CSS alone. This also allows the container element to be dynamically sized. To understand this technique you must first understand the CSS positioning methods and tricks. Its recommenced that you read this first.

Creating Rounded Edge Images

Use any comfortable graphic software such as Photoshop to make a rounded corner rectangle and cut the four corners and save as four images.

Create Rounded Edge Div Element

First create the CSS style for the rounded corner. The padding of the container element depends on the size of the corner images. We don’t want the corner to overlap the contents of the container. The container element position must be set as relative (position:relative). The corner images must be absolutely positioned (postion:absolute) to the four corners. This position might have to be tweaked to get the best result.

The container element here is a DIV tag and the four corner images are place inside. Then assign the images their respected style classes. This will cause them to be placed at the appropriate corners that gives the container the rounded look.

<div class="roundedRect">
<img class="corTL" src="Top-Left.jpg" alt="topl" width="52" height="58" />
<img class="corTR" src="Top-Right.jpg" alt="TopR" width="52" height="58" />
<img class="corBL" src="Bottom-Left.jpg" alt="BotL" width="52" height="56" />
<img class="corBR" src="Bottom-Right.jpg" alt="BotR" width="52" height="56" />
<p>Top text here</p>
<br /><br /><br /><br />
<p>The bottom text here</p>
</div>

Now you don’t have to worry how high or wide the container is going to be, it will automatically adjust the corners.

View Demo Here