contour sur une seule bordure

Comment appliquer une bordure incrustée dans un élément HTML, mais seulement sur un côté de celui-ci. Jusqu'à présent, j'utilisais une image pour faire cela (GIF / PNG) que j'utilisais ensuite comme arrière-plan et l'étirais (repeat-x) et la positionnais un peu en dehors du haut de mon bloc. Récemment, j'ai découvert la propriété CSS contour , ce qui est génial! Mais semble entourer tout le bloc ... Est-il possible d'utiliser cette propriété de contour pour le faire sur une seule bordure? Sinon, avez-vous une astuce CSS qui pourrait remplacer l'image d'arrière-plan? (pour que je puisse personnaliser les couleurs du contour plus tard en utilisant CSS, etc.). Merci d'avance!

Voici une image de ce que j'essaie d'accomplir: http://exiledesigns.com/stack.jpg

Le contour s'applique en effet à l'ensemble de l'élément .

Maintenant que je vois votre image, voici comment y parvenir.

.element {
  padding: 5px 0;
  background: #CCC;
}
.element:before {
  content: "\a0";
  display: block;
  padding: 2px 0;
  line-height: 1px;
  border-top: 1px dashed #000; 
}
.element p {
  padding: 0 10px;
}

<div class="element">
  <p>Some content comes here...</p>
</div>

(Ou voir la démo externe. )

Toutes les tailles et couleurs ne sont que des espaces réservés, vous pouvez les modifier pour qu'elles correspondent exactement au résultat souhaité.

Remarque importante : .element doit avoir display:block;(par défaut pour un div) pour que cela fonctionne. Si ce n'est pas le cas, veuillez fournir votre code complet, afin que je puisse élaborer une réponse spécifique.

Vous pouvez utiliser box-shadowpour créer un contour sur un côté. Comme outline, box-shadowne change pas la taille du modèle de boîte.

Cela met une ligne en haut:

box-shadow: 0 -1px 0 #000;

J'ai créé un jsFiddle où vous pouvez le vérifier en action.

INSET

Pour une bordure incrustée , utilisez le mot clé inset . Cela met une ligne incrustée sur le dessus:

box-shadow: 0 1px 0 #000 inset;

Plusieurs lignes peuvent être ajoutées à l'aide d'instructions séparées par des virgules. Cela met une ligne incrustée en haut et à gauche:

box-shadow: 0 1px 0 #000 inset,
            1px 0 0 #000 inset;

Pour plus de détails sur son box-shadowfonctionnement, consultez la page MDN .

Essayez avec l'ombre (comme la bordure) + la bordure

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;

Je sais que c'est vieux. Mais ouais. Je préfère une solution beaucoup plus courte que la réponse de Giona

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

J'aime donner à mon champ de saisie une bordure, supprimer le contour sur le focus et "délimiter" la bordure à la place:

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

Vous pouvez également le faire avec une bordure transparente:

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

La grande chose à propos de HTML / CSS est qu'il existe généralement plus d'une façon d'obtenir le même effet. Voici une autre solution qui fait ce que vous voulez:

<nav id="menu1">
    <ul>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
    </ul>
</nav>

nav {
    background:#666;
    margin:1em;
    padding:.5em 0;
}
nav ul {
    border-top:1px dashed #fff;
    list-style:none;
    padding:.5em;
}
nav ul li {
    display:inline-block;
}
nav ul li a {
    color:#fff;
}

http://jsfiddle.net/10basetom/uCX3G/1/

un seul côté outlinene fonctionnera pas, vous pouvez utiliser leborder-left/right/top/bottom

si je reçois correctement votre commentaire