CSS: rounded corners and variable width block

21.04.2009 Tags: css,xhtml,tutorial,Version française disponible ici! This trick is compatible with Firefox, Safari (so Konqueror too, as they have the same web engine), Opera and IE 7. And IE 6? Nope, and here are the reasons:
1° fewer and fewer people browse with it.
2° PNG transparency isn't supported (at least if you don't want to find hacks to trick IE 6).
3° I'm fed up trying to find solutions for a browser that doesn't support web standards at all.
If you have the guts, you can try to adapt my code to make it "IE 6 compliant".
I'll pass my turn =)

Anyway... let's proceed. Here is a little sketch showing the block structure.

css block sketch

First of all you need 8 pictures: 4 corners (n° 1->4) and 4 borders connecting the corners (n° 5->8).
You have to pay attention to your pictures' dimensions. For example, the width of element 1 has to be the same as 8's and the height of element 1 has to be the same as 5's. This means that 1 and 4 will have the same width and 1 and 2 the same height.
About the borders: you need two little 1px thick pictures set as background images and repeated on the height (for 6 and 8) or width (for 5 and 7), creating your border.

Now let's create the code. We'll have a main div block containing all the different classes. Those classes having a background image that will create our block.

This is how our main block is created: (the picture's name corresponds to the number on the sketch)

#bloc {
width: 100%;
background:url("5.jpg") repeat-x left top transparent;
}

This block will be the same size as the parent one (width: 100%). Its background image is the top border repeated on the block width (repeat-x left top). All other elements will be inside this block.

The HTML code is:

<div id="bloc">

</div>

Now we need to create our bottom border (n° 7).

#bloc .bottom_border {
background:url("7.jpg") repeat-x left bottom transparent;
}

The background is repeated on the width, but this time we place it on the bottom (repeat-x left bottom).

In our HTML page:

<div id="bloc">

<div class="bottom_border">
</div>

</div>

Let's define our top corners with the following classes:

#bloc .top_right {
display: block;
float: right;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("2.jpg") no-repeat right top transparent;
}

#bloc .top_left {
display: block;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("1.jpg") no-repeat left top transparent;
}

Both classes have a fixed size, the same as the corner's dimensions. The float: right of the top_right class "pushes" the element to the right of the parent block, placing our top-right corner.

We need to add those classes inside our bottom_border class:

<div id="bloc">

<div class="bottom_border">
<div class="top_right"></div>
<div class="top_left"></div>
</div>

</div>

Ok, now with the side borders:

#bloc .left_border {
background:url("8.jpg") repeat-y left top #000000; //the color #000000 is element 9's background color
}
#bloc .right_border {
background:url("6.jpg") repeat-y right top transparent;
}

The background image is repeated on the height of the parent's block (repeat-y).
We need to to as follows in our HTML page:

<div id="bloc">

<div class="bottom_border">
<div class="top_right"></div>
<div class="top_left"></div>
<div class="left_border">
<div class="right_border">

</div>
</div>
</div>

</div>

Only the two last corners left!

#bloc .bottom_left {
display: block;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("3.jpg") no-repeat left top transparent;
}
#bloc .bottom_right {
display: block;
float: right;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("4.jpg") no-repeat right top transparent;
}

And in our HTML page: (full code)

<div id="bloc">

<div class="bottom_border">
<div class="top_right"></div>
<div class="top_left"></div>
<div class="left_border">
<div class="right_border">

</div>
</div>
<div class="bottom_right"></div>
<div class="bottom_left"></div>
</div>

</div>

Full CSS:

#bloc {
width: 100%;
background-color: transparent;
background:url("5.jpg") repeat-x left top;
}

#bloc .bottom_border {
background:url("7.jpg") repeat-x left bottom transparent;
}

#bloc .top_right {
display: block;
float: right;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("2.jpg") no-repeat right top transparent;
}

#bloc .top_left {
display: block;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("1.jpg") no-repeat left top transparent;
}

#bloc .left_border {
background:url("8.jpg") repeat-y left top #000000; //the color #000000 is element 9's background color

#bloc .right_border {
background:url("6.jpg") repeat-y right top transparent;
}

#bloc .bottom_left {
display: block;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("3.jpg") no-repeat left top transparent;
}

#blo .bottom_right {
display: block;
float: right;
width: XXpx; //replace XX with your border's width
height: YYpx; //replace YY with your border's height
background:url("4.jpg") no-repeat right top transparent;
}

Add a comment

Comments

Gautam Jain 13.10.2010, 13:38:52 Fantastic. Thanks for the tutorial.

It would be great if you guide me how to have repeat background image in the area 9.

You can reply this comment if you have an answer. I will keep a watch on this post.

Astanos 31.10.2010, 16:12:32 Hi Gautam,
You can try the following:

- create your background image (in my example its height equals 1px)

- add the following in your CSS:

#bloc .bg {
background:url("9.jpg") repeat-y left top #000000;
margin-left: XXpx; //XX equals your left column's width
margin-right: YYpx; //YY equals your right column's width
}
(this will allow you to repeat your background only in the center part of your block without overlapping your columns)

- add the following in your HTML page inside your right_border class:

<div class="right_border">
<div class="bg">content and text...</div>
</div>

I quickly tested on Firefox and it works. Should be also ok on IE 7 and 8

Hope it helped and thanks for the comment :)