Log in

View Full Version : Adding 2 seperate border colors to a DIV



Josh[y]
11-03-2009, 12:38 AM
Code name:
Adding 2 seperate border colors to a DIV

Author name:
Josh

What does this code do?
This is just a simple tutorial on how to add 2 different border colors (And widths) to a DIV. (You can download the HTML file I attached to see a sample.)

The CSS


/*This is the outer border width/color (Should be red)*/
div.dbdiv {
border: 2px solid #FF0000;
width: 400px;
}
/*This is the inner border width/color (Should be blue)*/
div.inner {
border: 3px solid #0000FF;
padding: 5px;
}

Things to change
You will need to first off change #FF0000 and #0000FF to the desired hex color code you want the borders to be.
Next, you will need to change 2px and 3px to the desired width you want the borders to be.
Lastly, you can either change or take out the padding: 5px;

You can take out the width: 400px; if you want, I just put that in there so the DIV in the example didnt span the whole page.

The HTML


<div class="dbdiv">
<div class="inner">
This div should have 2 different border colors and widths. This is the text you want to change.
</div>
</div>

Things to change
Should be obvious.

If you have any problems please post here!
(For all you CSS and HTML experts, I know this is simple, its for the simple minded HTML and CSS designers out there that are just learning ;))

puffnstuff
11-03-2009, 12:34 PM
Thank you, from a simple minded beginner!

Things like this are very useful, and not always obvious.

We all have to start somewhere!