Inline border-top with CSS?

I want to make a button like this:

 -----
|+++++|
|TEXTT|
|     |
 -----

How do I get the ++++ border? My current code:

.toolbar-top a.button, .toolbar-bottom a.button {
  display: inline-block;
  margin: 7px;
  padding: 0px 9px;
  height: 28px;
  line-height: 28px;

  /* LINE 8 */border: solid 1px #525356;
  -webkit-border-radius: 5px;

  color: #FFFFFF;
  background: -webkit-gradient(linear, left top, le开发者_如何学Goft bottom, from(#BFC3CA), to(#848D9B));
  text-decoration: none;
  font-weight: bold;
  text-shadow: #72777D 0px -1px 0px;
}

I want a one-pixel border below the border from line eight.

Can anyone help me?

It's good if it's compatible with Webkit (iPad).

Changing the HTML is no option (that's why I'm using CSS).

Using images is no option either ;D

You can try adding a inset box shadow with no blur and a 1px top offset, something like:

-webkit-box-shadow: inset 0 1px 0 #ddd;

put a span inside your buttons like this:

<a href="/" class="button"><span>text</span></a>

then style your span to have a border

a.button span { display:block; border-top:1px solid red }

If you can't modify the HTML but use javascript, I suggest using jQuery and doing it like this:

$('a.button').wrapInner(<span></span>);

For a pure CSS solution, one can use outline:

#mydiv {
  outline: solid 1px #525356; /* outline border */
  border-top: solid 1px #fff; /* inner top border */
}