Borders and More

Solid: <p style="border: solid 2px #000000">

Dotted: <p style="border: dotted 2px #000000">

Dashed: <p style="border: dashed 2px #000000">

Double: <p style="border: double 4px #000000">

Groove: <p style="border: groove 4px #000000">

Inset: <p style="border: inset 4px #000000">

Outset: <p style="border: outset 4px #000000">

Ridge: <p style="border: ridge 2px #000000">

You do not have to use the same border options throughout the whole box.

Here are the other names for borders you can use:
Border-right
Border-left
Border-top
Border-bottom

Creating rounded borders is simular to making regular borders, but now you have the option to round them. Here is the code to get your started. All border options are the same so you can modify it accordingly.

<p style="border:solid 2px #DAA520; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background: #FFE4B5; padding: 5px">

Sorry this does not work in internet explorer, but images will fix this problem.

You may be asking me what each of these mean. The start of the code is like you normally do, but then you start adding the information in so that you have rounded corners. A radius is what makes it curve whichever way you want it. Take the -moz-border-radius: 15px; section of the code. You can actually add another number to get a variation of the same code like 2px.

This is what you get: -moz-border-radius: 2px 15px;. Remember you have to do this for each separate browser.

You may be asking why there are multiple radius'. Here is the reason. They cover different web browsers as different ones read them in different ways. No one piece of software is designed exactly the same way. Does Windows act the same way as linux or mac's OS? No it does not. The same goes for web browsers. They are designed by different people so there are different ways it handles the same idea.

-moz is easy to understand for most people. This one is used for mozilla which is also known as firefox.

-khtml which is usually used on Konqueror which is a browser that is typically used on Linux OS.

-webkit is typically used on google and safari.

lets take a look at the section that says: -moz-border-radius: 15px;

Here you can do other things and creating other variations it where you can set different radius' for each corner.

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Do you see a pattern here? I added to the mozilla browser the location to edit. Don't forget to do the same thing with the other browsers too.

This is not a perfect, but it does its job. If you take a look at the black box module, you will notice that it also has a gap on the top and bottom.

This is what I did:
<img style="width: 600px" src="http://images.newhorizonspaces.com/1247194169/gallery_3_2270.png" /><p style="background: #330033; width: 570px; padding-left: 15px; padding-right: 15px;"><b style="color: #ffffff;font-weight: normal;">your text here</b></p><img style="width: 600px;" src="http://images.newhorizonspaces.com/1247193637/gallery_3_439.png" >

This is an exact code that I used. The images I have placed here are located on my website. I will be making more rounded corners and they will be placed on my graphics lens for you to use so that you don't have to do all of the work of creating the rounded corners.