[CrazyJ Cena]

Applying round border corners:

Making round borders includes very little code but is some advanced CSS. The 3 codes we are going to need are the properties of "border", "-moz-border-radius" and "border-radius" Here is an example container code before the round corners are applied:

PHP Code:

#container { width: 80%; background: #fff url(/images/containerbg.jpg); color: #FF0000; text-align: left; }

as you can see there is no border properties so that is what we need to add first

For a border just simply add the code "border: 1px solid #FF0000;".

You can edit the size by changing the 1px in the code, you can also edit the color of the border in the code of#FF0000 using the typical "red, white, blue ect..." or "#fff, #000, #FFF0000 ect..." it pretty simple once you get the hang of them.

Not we need to add that to the code using your choice of color and size like so:

PHP Code:

#container { width: 80%; background: #fff url(/images/containerbg.jpg); border: 1px solid #FF0000; color: #FF0000 text-align: left; }

Yes adding a border is that simple! Now for the more "complex" bit that surprisingly quite a few people that know CSS do not know thiese properties; The codes you will be using are "-moz-border-radius:15px;" and "border-radius: 15px;"

Again you can edit the size by changing the code that is in red.

Now these codes are the codes that act as "rounders"; they simple give your container a more 'stunning' look.

Now to add them to our CSS, although with these you might want to make them a little more "aligned" like so:

PHP Code:

#container { width: 80%; background: #fff url(/images/containerbg.jpg); border: 1px solid #FF0000; -moz-border-radius:15px; border-radius: 15px; color: #FF0000 text-align: left; }

As you can see it is pretty simple. Outcome? You'll see.

[Grily]

Great tutorial IronMan. I already knew this, but this will be useful for people who are new to HTML/CSS.