Donate

All this information & code is provided completely free of charge, but if you have some spare money, and wish to send me some for my trouble, please hit the button below!

JukeBox

Sponsor Ads

Tutorial: Making Rounded Corners

Theres a couple of ways of doing this.

Simple Boxes

The very simplest is to draw your rounded box in a [ grafix program ] (most have a rounded box shape tool) and set it as a table background:

<table width="200px" height="150px" cellpadding="10" background="http://www.path/to/your_image.gif"><tr> <td align="center">Your Text and Stuff</td></tr></table>

Look how easy this is!

But there are a couple of drawbacks to this method, like that your background graphic may be quite big, and take a while to load. Also if you want another box, or to resize your box its completely back to the drawing board. Perhaps a stretchy box would be better...

Stretchy Solid Boxes

First solid colored stretchy boxes. This time rather than drawing an entire rounded box in photoshop, just draw yourself some corners:

(if you cant draw your own corners I provide a bunch of downloadable ones at the bottom of this page)

To make your table the same color as the corners, you need to know the hex code of your corners. To find the hex code of a color youre using in your graphics program, just click on the color palette and look for a 6 digit code preceeded by a #. The hex code for my corners above is #ccccff. Now all you need is the code:

What it effectively does, is arrange your corners in a table like this:


	Except the table created by that code doesnt have a border like this one!

So all you see...


	...is this!

Bordered Stretchy Boxes

But what if you dont want an entirely colored box...


	..how about a bordered one?

The code for that is a bit different because you need graphic side bits as well. First make your corners:

A good way to do corner graphics is to draw a rounded box, and then a smaller rounded box inside it.

To make the side bits you can just crop off the bottom bit of one of your corners...

For instance the bit cropped off the image above will be used as a repeating background all down the left side of your box, get it?

Once youve got your corners, and left, right, top and bottom side bits the code is:

Putting Scrollboxes Inside

To stick a scrolling box inside one of your rounded boxes


	like this ...

You just need to add a bit more code inside the center td (where you would write your text). The extra code is:

<div style="width: 150px; height: 100px; overflow: auto;">Your stuff here!</div>

Remember, with overflow: auto; the scroll arrows dont appear until theres too much stuff to fit in the box so if you just write one sentence you wont see any scrolly arrows! You could write overflow: scroll; to make both horizontal and vertical scrollbars show up all the time, or overflow- y: scroll; if you just want to see the vertical arrow.

Readymade Corner Packs to Download

For white backgrounds:

	Download		Download
	Download		Download
	Download		Download

For black backgrounds:

	Download		Download
	Download		Download

<< back to grafix tutorials