Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Rounded Box With Images
OK, I know that there are hundreds of tutorials out there dedicated to creating rounded corners on boxes with pure CSS or some javascript plug in. Honestly, until Internet Explorer 6 or 7 (and 8 in some cases) are dead, all of these methods have issues. It is nice to have a sexy, 2.0 style rounded edge to your site or elements of your site. They just look smart and modern.
You must always remember that your site should expand with content. Users re-sizing text don't want to be met with text dissapearing over the edges of your boxes because you have simply placed a div tag over a static image. So, how is this achieved with simple images and CSS?
You want your box to expand with content. This is easy when you need a square box, you just give the div a coloured background. But, with the curved edges on your box you will need three divs.
Create Three Images
The first thing you will need to do is to create three images. Create the desired look for your box in your favourite graphics editor and then slice it into a top, middle and bottom as I have done here;
OK, my box isn't sexy...at all. This is just for demo purposes. I'm sure that you can go and make a far prettier box! However, you will see how the top, middle and bottom of the box are sliced up. I have used a very thin slice for the middle of the box and the reason for this will become apparent in a moment.
The CSS
First up I am going to create a CSS class to style the content of the box. I will be keeping the CSS as simple as I can and will be using some CSS shorthand so make sure you view my tutorial on CSS shorthand before continuing. OK, so here is the CSS;
.boxcontent {
width: 210px;
padding: 0 20px;
background: url(images/tips_images/box_with_images/box_bg.jpg) repeat-y scroll center center;
}
The HTML
The HTML for the box is just three div tags with the class, outlined above, applied to the middle div. I will also insert the box top and box foot images in the top and bottom divs. There is no need to give any CSS styles to the divs holding the images as the size of the divs images will dictate the size of the divs. You can apply any styles you like to the top and bottom divs should you wish but my simple box doesn't need them, so I haven't bothered;
<div><img src="images/tips_images/box_with_images/box_top.jpg"></div>
<div class="boxcontent">Here is the content of your box.</div>
<div><img src="images/tips_images/box_with_images/box_foot.jpg"></div>
The result you get can be seen below;
The boxcontent class has the thinly sliced image of the main body of the box repeating along the y axis. This means that, no matter how much content you add or if the text is resized, the box will appear to resize with it. If you want to test this out then write some text in the form below and press 'Submit'. Some PHP magic will add your content to the example box above and you should see how the box grows.
I would love to live in an ideal web world where CSS3 is embraced and encouraged by everyone who makes browsers. And where everyone else kept on top of browser updates and designers were free to use all those nifty tricks and styles we have been reading about (and using in decent browser environments). The truth is that we don't live in that world. Our world has Microsoft and people who don't care what browser they use (they are all the same...AREN'T THEY??) Until I have reached my web utopia I will only really consider rounded corners with images to be the truly cross-browser solution.
