Results 1 to 2 of 2

Thread: Adding 2 seperate border colors to a DIV

  1. #1
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adding 2 seperate border colors to a DIV

    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
    Code:
    /*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
    HTML 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>
    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 )

  2. #2
    Join Date
    Feb 2007
    Posts
    46
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you, from a simple minded beginner!

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

    We all have to start somewhere!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •