Can border height be controlled via css?

Discussion in 'CSS' started by James McMurray, May 19, 2008.

0
  1. #1
    I'd like a layout similar to this:

    
   Text stretches
   higher than
| the left border
| and farther than the bottom border
 ------------------------------------
    Code (markup):
    Is something like that possible on a div or td?
     
    James McMurray, May 19, 2008 IP
  2. JJ-sama

    JJ-sama Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think you can, but I don't understand "text stretches higher than the left border and farther than the bottom border." Sounds kind of confusing... >__<
     
    JJ-sama, May 20, 2008 IP
  3. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #3
    The style of the border can be controlled, the weight of the border can be as well, you may set the distance of the border using padding. Please check this border reference for further information.
     
    Bagi Zoltán, May 20, 2008 IP
  4. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yes you can control the width/height of the border - check Zoltan's link - it's all well explained there ;)
     
    risoknop, May 20, 2008 IP
  5. James McMurray

    James McMurray Peon

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That link doesn't mention anything about height. What I mean is, given the example paragraph above, is it possible to make the left border not stretch all the way to the top, and instead stop halfway up the td. Likewise with the bottom border only stretching halfway across, stopping around the 'n' in 'than'.

    Looks like it's not possible with css, at least not without nesting some divs or something to put another container with a border inside the td and use its border.

    Thanks!
     
    James McMurray, May 20, 2008 IP
  6. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yes I see what you mean now. Well, as far as I know it cannot be done in CSS alone - you will need to use some nested divs.

    Maybe if you made a 1px x 1000px image and put it as a background image to the left - that might work.
     
    risoknop, May 20, 2008 IP
  7. snowalker

    snowalker Member

    Messages:
    126
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #7
    unfortunately the height of a border cannot be controlled trough css. I'm looking for the same thing and I cannot find any positive answer.
     
    snowalker, Dec 5, 2009 IP
  8. RuslanKuramshin

    RuslanKuramshin Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Yes U can control border height via Css
    Just put next to the border: line-height: 2em (or 1em or -1em and so long)
    If you will have problems with content inside of your border put: vertical-align: middle
    And the rest is self-explanatory
     
    RuslanKuramshin, Dec 7, 2009 IP
  9. palimadra

    palimadra Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #9
    Hey Ruslan

    Great answer.

    What I'm trying to do is add a pipe symbol. When I increase the height of the div where I'm using the border the size of the pipe symbol increases which I do not want. Therefore unfortunately the solution you provided does not work for me.

    However, I do agree that it will work in lots of cases. Thanks for sharing.

    Pali Madra



     
    palimadra, Jul 28, 2010 IP