Inline border-top avec CSS?

Je veux faire un bouton comme ceci:

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

Comment puis-je obtenir le ++++ frontière? Mon code actuel:

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

Je veux un pixel de la frontière en dessous de la frontière de la ligne huit.

Quelqu'un peut m'aider?

C'est bon si c'est compatible avec Webkit (iPad).

Changer le HTML n'est pas une option (c'est pourquoi je suis à l'aide de CSS).

À l'aide d'images n'est pas une option non plus ;D

InformationsquelleAutor | 2010-09-03
  1. 2

    Vous pouvez essayer d'ajouter un encart de zone d'ombre avec pas de flou et un 1px de haut compensé, quelque chose comme: 

    -webkit-box-shadow: inset 0 1px 0 #ddd;
    InformationsquelleAutor Yi Jiang
  2. 2

    mettre un span à l'intérieur de vos boutons comme ceci:

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

    puis le style de votre durée pour avoir une bordure

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

    Si vous ne pouvez pas modifier le code HTML, mais l'utilisation de javascript, je suggère l'utilisation de jQuery et de le faire comme ceci:

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

    • Oups, j'ai oublié de mentionner que je ne peux pas changer mon code HTML. Désolé (:
    • comment sur l'ajout de la durée de via javascript?
    • Eh bien, c'est une très bonne idée! Ma page a besoin de JavaScript déjà. Je vais l'essayer.
    • Voir mon édité réponse avec du code javascript
    InformationsquelleAutor Moin Zaman
  3. 0

    Pour un pur CSS solution, on peut utiliser outline:

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