Border not full height of css element

Question

I would like to know how to make the border of an element not span the full length of the element. I've seen some suggestions to use line-height though that doesn't seem to work for me (at least not with the <ul> tag which is what I'm using).

A popular example of someone doing this would be the search at http://android.com which has this sort of effect though I can't find anything relating to it in the css.

Ex:

Answer 1

Here's another option for the mix. box-shadow is fast becoming one of my favourite new CSS features...

No extra markup, nothing but CSS (and no pseudo-elements)...

DEMO: http://jsfiddle.net/npsMx/2/

HTML

<input type="text" class="search" />

CSS

.search {
    border: 0px solid blue;
    border-bottom-width: 1px;
    -webkit-box-shadow: -5px 4px 0px -4px blue;
       -moz-box-shadow: -5px 4px 0px -4px blue;
            box-shadow: -5px 4px 0px -4px blue;
}

We force the box-shadow on to just the left hand side. Setting it to -5px sets the width on the left to just that... The -4px later effectively shuffles is back across the way leaving just one pixel visible (i.e. equal to our border-bottom-width.

Hard to explain but easy to see if you just play with the values!

Answer 2

How about something like this... It's not completely cross browser due to pseudo-elements and contenteditable, but it's a different solution -- and it works.

HTML

<!--// can't use pseudo elements on input, so let's make a div contenteditable //-->
<div class="foo" contenteditable></div>

CSS

.foo {
    position: relative;
    width: 150px;    
}

.foo:after {
    position: absolute;
    top: 1em;
    left: 0;
    content: "";
    width: 150px;
    height: 0;
    border-bottom: 1px solid #bada55;
}
.foo:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    height: 0.5em;
    width: 1px;
    background: #bada55;
}

.foo:focus {
    outline: solid transparent;
}

JSFiddle