Grow your CSS skills. Land your dream job.

Is there a way to give border width?

  • # June 2, 2013 at 8:23 am

    Is there a way to give a border width to an element? I want a situation where a border-bottom will be shorter or longer than the element it is applied to. I tried border-width:100px, but it made the border to appear like a box. Is there a better way of doing it?

    # June 2, 2013 at 8:29 am

    you mean like:

    .someThing {
    border-bottom:100px solid #ccc;
    }

    # June 2, 2013 at 8:29 am

    Only way is using a (pseudo)element, as `border-width` is the thickness of the border. Something like:

    x:after {
    content: ”;
    display: block;
    width: 80%;
    height: 10px;
    margin: 0 auto;
    background: green;
    }

    # June 2, 2013 at 9:55 am

    @Crocodillon. Look at what i want to do. i have a link. I want when the link is hover, it will have a bottom border that will be longer than the link text. See [codepen.](http://codepen.io/alex13/pen/HlkFz “”)

    # June 2, 2013 at 10:02 am

    Put the border on the `li`?

    http://codepen.io/Paulie-D/pen/tCuyc

    # June 2, 2013 at 10:08 am

    It didnt work sir. Check [this.](http://codepen.io/alex13/pen/arhzd “”)

    # June 2, 2013 at 10:15 am

    You aren’t making yourself clear then.

    Do you want it longer, wider or taller?

    # June 2, 2013 at 10:27 am

    longer.

    # June 2, 2013 at 10:28 am

    Then the example I gave is fine…the border is longer than the text.

    # June 2, 2013 at 10:38 am

    No. I want when u hover on ‘home’, it’s bottom border will stretch all the way to ‘contact’.
    Then when u hover on ‘about’, starting from about text, it’s border will again stretch to contact. and so on.

    # June 2, 2013 at 10:38 am

    Then when you hover on ‘contact’ itself, it’s bottom border will stretch back all the way to home.

    # June 2, 2013 at 10:41 am

    edit// I just saw your new posts. why didn’t you mention that to begin with, rather than have 3 people (if not more) waste time suggesting things you originally asked for but don’t want?

    previous post// Dillon’s suggestion is still perfectly valid (as is Paulie’s with a different method); you stated ‘shorter or longer’ and Dillon gave you shorter. Just change the 80% to something greater than 100% if you want it longer.

    http://codepen.io/wolfcry911/pen/lsvHA

    # June 2, 2013 at 10:41 am

    @CodeGraphics

    Not sure what experience that would give to the user, confusing at best.

    However, I think you would need javascript to do that.

    # June 2, 2013 at 10:55 am

    >Then when u hover on ‘about’, starting from about text, it’s border will again stretch to contact. and so on.

    I think @wolfcry911 has gone about as far as css can take it.

    To get what you want, I’m not sure CSS is the answer.

    However, I re-iterate

    >Not sure what experience that would give to the user, confusing at best.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".