Inline border-top with CSS?

Question

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, left 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

Solution 1

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;

Solution 2

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>);

Comments

[Admin]

Whoops, forgot to mention I can't change my HTML. Sorry (:

[Moin Zaman]

how about adding the span via javascript?

[Admin]

Well, that is a very great idea! My page needs JavaScript already. I'll try it.