SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to show two sides of container?

    When I choose a size and color for a border of a <div> container the code looks like what I have below. All four sides of the container have a 1px thick black line border. How can I just have only two sides with a 1px black line and the other two sides with no line border?



    Code:
    #generic-container123 {
      border: 1px solid #000000;
      width:900px;
      height:700px;
      float:center;
      margin:0px 0px 0px 0px; 
      padding: 0px 7px 0px 7px;
      background:#ffffff;
    }

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Add:
    Code:
    border-width: top right bottom left
    and replace those words with your widths. (Not it also works where if you have one value for all sides, two values for top-bottom right-left and three for top right-left bottom).

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You would do something like this:

    Code:
    #generic-container123 {
      border: solid #000000;
      border-width: 1px 0;
      width:900px;
      height:700px;
      float:center;
      margin:0px 0px 0px 0px; 
      padding: 0px 7px 0px 7px;
      background:#ffffff;
    }
    Of course, there are many variations. All I've done is remove the border-width from the shorthand rule and added it in separately.


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
  •