Using CSS Position in Creating Boxes w/ Rounded Corners

There’s this CSS trick I came across a couple of years ago that never seize to amaze me. It’s the use of two position attributes to control elements within a defined boundary. It is, by far, one of the most lucrative piece of CSS information that I get to apply in so many design situations and actually, if you’re just starting to learn about CSS, this is going to take you far.

To better understand how this trick works, let us use it an actual design scenario, for example — creating boxes with rounded corners.

Long before people knew about CSS3, designers have already been fond of using boxes with rounded corners. Nowadays, creating these have been relatively easy especially with the aid of CSS3, particularly, the –moz-border-radius or –webkit-border properties.

Handy as it may seem, some CSS3 properties such as what I’ve just mentioned tend to have cross-browser compatibility limitations. It’s inevitable. Finding alternative ways to get around it is the only thing we can do.

So if you ask me, using images maneuvered with few CSS position properties are still the less hassle way of dealing with boxes with rounded corners.

Here’s what we’re trying to produce.

Basically, it’s a green box with 4 rounded corners with some text inside. And here’s how we go about it.

I. Producing the Rounded Corner Images

Normally, I’ll slice square images of the 4 rounded corners in Adobe Photoshop and export it as image files. Here are links to my sample images:

• Top-Left Corner
• Top-Right Corner
• Bottom-Left Corner
• Bottom-Right Corner

II. The HTML Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus iaculis est et convallis. Cras sed turpis a ligula blandit tempus. Maecenas orci nibh, dapibus ac iaculis et, porta nec ipsum. Praesent sollicitudin, nisi non fringilla venenatis, ligula quam molestie felis, eu hendrerit leo sem non lectus. Sed semper malesuada pharetra. In eu ipsum a nisi tristique suscipit. Pellentesque hendrerit ornare mi in feugiat.

What we did here was to create a containing div element and under it are the 4 rounded corner images in its own div that we’ve given class names of TL, TR, BL & BR respectively. Then there’s the paragraph that should be seen inside the box.

III. The CSS Code

.box { position: relative; border: solid 1px #7cbb30; }
.TL, .TR, .BL, .BR { position: absolute; }
.TL { top: 0; left: 0; }
.TR { top: 0; right: 0; }
.BL { bottom: 0; left: 0; }
.BR { bottom: 0; right: 0; }

Using CSS, we are tying to manipulate where the different elements should be located. This is where THE trick should come in.

The first line was for the containing div of our box. The position: relative; that we’ve given for it will set the boundaries as to where our images can go. It limits the extent on how far everything inside it will be positioned. Then the border properties were given to make it look like an actual box.

The second line was for our 4 images. The position: absolute; that we’ve given for it will position the images relative to our containing box. With the help of directional attributes, it controls where exactly inside the box these images should be positioned.

Then the succeeding lines are just directional attributes that dictate which corners should our images go.

The combination of the two position attributes in creating boundaries and maneuvering elements within that boundary are very crucial in this example. Understanding how they work together is one CSS trick that you’ll find very useful in a lot of situations.