Alexandru Dinulescu's Thoughts

Hello.

This tutorial will illustrate how to create a variable width/height box with a background image and rounded corners via CSS.

The solution is very easy and the box created can be easily modified and shaped according to different widths and heights required.

First off: you need a PSD file or an image with the entire box.

Second you need to have a HTML file, a CSS file and the images folder.

Ok, so the html structure will look like this:

THE XHTML

The first line is the container of the box.

The second line is a helpful CSS class helper and it shows in the code what that div is doing.

The logic is: top bar, bottom bar, left bar, right bar, bottom-left corner, bottom-right corner, top-left corner , top-right corner. The .innerRoundBorder is another helpful CSS class, so you can chain your CSS for one thing, so you dont have to have large specificity. The fact is that this technique is based on the specificity of the CSS, as you will see in the following CSS file below.

The PSD will be sliced like this, the corners, and then a section of each of the 4 bars, the heights must be identical of the bars, for ex the top-left corner, the top-bar, the top-right corner all of them must be of equal height, and ex: the top-left corner, the left bar, bottom-left corner, for these the width must be identical.

The CSS:

To tell others who may work on the code after you, you can put a small comment at the top like this

This technique can be used both on large scale and on small scale, however it’s best not to exaggerate a lot as the number of divs gets exponentially larger.

The 2nd way to make rounded corners is by using the jQuery framework and the jQuery Corner Plug-in. The explanations on it’s website will be sufficient enough to get you started, but if you require more info post a comment and I’ll see what i can do.

Best Regards