Встроенный бордюр с CSS?

Question

Я хочу сделать такую ​​кнопку:

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

Как получить границу ++++?Мой текущий код:

.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;
}

Мне нужна граница в один пиксель ниже границы восьмой строки.

Кто-нибудь может мне помочь?

---

Хорошо, еслион совместим с Webkit (iPad).
Изменение HTML не допускается (поэтому я использую CSS).
Использование изображений также невозможно; D

Answer 1

Вы можете попробовать добавить теневую рамку для вставки без размытия и смещение верхней части на 1 пиксель, например:

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

Answer 2

поместите интервал внутри ваших кнопок следующим образом:

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

, тогда стиль вашего промежутка будет иметь границы

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

Если вы не можете изменить HTML, но используете javascript, я предлагаю использовать jQuery и сделать это так:

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

Answer 3

Для чистого решения CSS можно использовать outline:

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