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 */
}