contour sur un seul bord

Question

Comment appliquer un insertion de la bordure dans un élément HTML, mais seulement sur un côté de celui-ci. Jusqu'à présent, j'utilisais une image pour ce faire (GIF/PNG) que j'utilisais ensuite comme arrière-plan, que j'étirais (repeat-x) et que je positionnais un peu à l'écart du haut de mon bloc. Récemment, j'ai découvert le aperçu La propriété CSS, c'est génial ! Mais elle semble entourer tout le bloc... Est-il possible d'utiliser cette propriété outline pour ne le faire que sur une seule bordure ? Par ailleurs, si ce n'est pas le cas, avez-vous une astuce CSS qui pourrait remplacer l'image d'arrière-plan ? (afin 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'obtenir : http://exiledesigns.com/stack.jpg

Answer 1

Ce qu'il y a de bien avec le HTML/CSS, c'est qu'il y a 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/

Answer 2

Un seul côté outline ne fonctionne pas, vous pouvez utiliser l'option border-left/right/top/bottom

si je comprends bien votre commentaire