Rounded edge boxes

I get asked this one a lot...so here is my method for doing rounded edge boxes.

Personally, I find all the complexity needed with rounded corners to be unnecessary, if you only want a simple box. Life would be much easier if we didn't have to make allowances for Internet Explorer. So the css given here is fairly basic, and will work with all mainstream browsers. If you want to get fancy, and start using dropshadows etc, then things get more complicated. So I'm not even going to look at that on this page.

If you just scroll down quickly thru this page, and browse at the code supplied, you will might just think it all looks too complicated, and give up before trying! But really, it's not complex at all. Just follow each instruction, and make sure you have the correct results, before moving on to the next stage. Do that, and you WILL have a rounded edge text box at the end of it.

Here are the steps needed, how to do it, and the code required. The box uses images for the corners. While this isn't such an impressive way to make the box rounded, compared to using pure css, it has the advantage of being very reliable. You can expect it to look pretty much the same in all browsers... without the need for hacks and tweaking.

You can set this box to any width, and add as much content as you like to it, the box will expand vertically to fit. This one shown was set to 80% width, centered, but I could have set it to 40%, and aligned it to the left or right. Very simple, but also versatile.

Create the main colored div

My div is going to be blue at the top and bottom, with a white content area. So here is the code need to create the blue div. Just a plain square div, nothing fancy. We will create and place the corner images later. Here is the css to add to your stylesheet (you can get all all the code required, further down the page).

Let's look at that a little closer. My background color is 2c1c8d, that's the navy blue color. The font is set to bold white. Notice the width is auto. This means it will default to the full width of the column you place it into. You leave it at that then over-ride that width on the html page, if you want to make it narrower.

So now if I add this class to my page, what do I get?

I put some text into the div, to make it show up. Otherwise with no content in the div, you wouldnt see anything, as there is no height specified. The div will expand to fit the content....with no content, it won't show.

Create rounded images for the corners

We need these to be the same shade as the div, with the canvas set to the same color as the background of our page. In this case, that is white. You can create the images in most good graphics programs. Create the top left one first, then flip it to create the top right. Same for the bottom ones, just flip the image vertically. Here are the images used for the demo....you can change the shade of them easily by just adjusting the hue and saturation using Paint.net, or any other graphics software.

Just right click on the images, and save them, if you want to use these ones.

The code to place the images

Notice I'm using easy to recognize names for my classes. But you can call them whatever you want. Now, I have my images stored in a folder called images....so what happens if I add this class into the container class that we use earlier?

Well, that was pretty simple. The div has the top left corner placed correctly. Next, you need to make a class for each corner. Here's the code for all corners.

If we place each image on the corners, then this is what we end up with.

The code on the page, used to get all corners positioned, looks like this. See that we now have 5 divs, with 5 closing divs. One for the main blue area, and one each for the corners.

Well, yes you could do. But adding say 5px of padding will also pull the corner images in by 5px, breaking your corners. So how do we get around that? We want the easiest, and simplest way of course...so we are going to create a div inside the main container div to hold the text. This can be given some padding to keep the text away from the sides.

You could choose to color it the same as your main container, but I'm going to color it white instead. That way I can put things like ebook images in there and have them blend into the background.

The text container div

Take a look at the code for that div. I've set the background to white.I have also removed the bolding on the text. The font size has been reduced a little, and I have put a border each side of it, to match the background div. That is much easier than making the div narrower to allow the blue to show on each side.

This has been done to try and avoid the "IE boxmodel bug". I don't like to use hacks unless they are absolutely necessary, and in this case they aren't. I have also put 5px of padding on both sides, and left aligned the text. What happens if we place this new div inside the main container div, and put the text inside here? Here is the code that would now be on the page.

Oh, that doesn't look quite right does it? I have my text, with the left and right borders. But no sign of the blue div or rounded corners.

That is because our new "text" div is taking up the full size, and covering everthing. The blue div and corners are still there, we just can't see them at the moment. To see the top part of the blue div, Im going to type a headline into it, forcing the text div downwards, exposing the blue one. THIS IS A HEADLINE.

Okay, thats better. We can now see the top of our blue div. The main text is left aligned, and it has some padding on each side. All we need now is to see the bottom of the blue div (thats still being covered by our text div). Why is it not showing?

Simple, the text div hasn't been told it shouldn't stretch right to the bottom. So we need to do that. Some people would create a a nice little clearing div, but the simple br clear="all" html tag will do the job perfectly. So insert that after the first closing div.

Well, now we see the whole thing. You can have it any width you like. Full width perhaps?

So there you have it. A simple, rounded edge text box. One that will work in any browser, and can be positioned on either side of the page, and at any width. I hope by going over each step used to construct it, you have a better understanding of how it works.

If you follow the instructions carefully, it WILL work. I get a lot of emails asking for help with css code, and invariably they say "Ive followed the instructions exactly". And that has not been the case. So if it doesn't work for you, then please go over everything again. You will probably have left off a closing div or something like that.

Those with a more adventerous nature might like to play with this a bit further. How about putting a graduated image in the text are for example? Only a slight mod needed to the text div...I have created a seperate class called text2 instead. See below.

I added in the code for a background image, which is a pale blue fading to white. Repeat-x means it will repeat only horizontally, and the white background will show below it. I also removed the font-style: bold; and replaced it with font-weight: normal;

Here is the image if you want it. This is a png, as that file type deals with graduations better than gif or jpg.

Extra Notes

Then save this to a text file (notepad) with the name of roundbox.css This can be uploaded to SBI using the Special Files Manager, in Site Central.

To reference the stylesheet on your page, put this into a textblock, any one will do, just make it far enough down the page that it doesn't intefer with Analyze It!

That's it, add the text box to your page and it should work.