Test-page using code to make a box on a web page

Test-page using code to make a box on a web page

Copied form

Solo Build It-help.easy-online-money.net/rounded-corners.html

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).

.round-container{ text-align:center; font-family: verdana, sans-serif;font-size: 100%; font-weight:bold; background-color:#2c1c8d; color:#fff; width: auto; padding:0px; margin: 0px; }

.top-right-image{ background-image: url(../images/tr-round.gif); background-repeat: no-repeat; background-position:top right;}

.top-left-image{ background-image: url(../images/tl-round.gif); background-repeat: no-repeat; background-position:top left;}

.bottom-right-image{ background-image: url(../images/br-round.gif); background-repeat: no-repeat; background-position:bottom right;}

.bottom-left-image{ background-image: url(../images/bl-round.gif); background-repeat: no-repeat; background-position:bottom left;}

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?

<<div class="round-container">>Just a plain band of blue color, stretching the full width of the page. Not very exciting yet. </div>

Just a plain band of blue color, stretching the full width of the page. Not very exciting yet.

I put some text into the div, to make it show up. Otherwise with no content in the div, you wouldn't 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

Enjoy this page? Please pay it forward. Here's how...

Would you prefer to share this page with others by linking to it?

  1. Click on the HTML link code below.
  2. Copy and paste it, adding a note of your own, into your blog, a Web page, forums, a blog comment, your Facebook account, or anywhere that someone would find this page valuable.