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
Things to changeCode:/*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; }
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
Things to changeHTML Code:<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>
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)



)
Reply With Quote
Bookmarks