contorno em apenas uma borda

Como aplicar uma borda inserida em um elemento HTML, mas apenas em um lado dele. Até agora, tenho usado uma imagem para fazer isso (GIF / PNG) que usaria como plano de fundo e esticaria (repeat-x) e posicionaria um pouco fora do topo do meu bloco. Recentemente, descobri a propriedade CSS do contorno , o que é ótimo! Mas parece circundar todo o bloco ... É possível usar esta propriedade de contorno para fazê-lo em apenas uma borda? Além disso, se não, você tem algum truque de CSS que possa substituir a imagem de fundo? (para que posteriormente eu pudesse personalizar as cores do contorno usando CSS, etc). Desde já, obrigado!

Aqui está uma imagem do que estou tentando alcançar: http://exiledesigns.com/stack.jpg

O esboço de fato se aplica a todo o elemento .

Agora que vi sua imagem, veja como fazer isso.

.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 veja uma demonstração externa. )

Todos os tamanhos e cores são apenas marcadores de posição, você pode alterá-los para corresponder ao resultado desejado exato.

Nota importante : .element deve ter display:block;(padrão para um div) para que isso funcione. Se não for o caso, forneça seu código completo, para que eu possa elaborar uma resposta específica.

Você pode usar box-shadowpara criar um contorno de um lado. Gosta outline, box-shadownão muda o tamanho do modelo da caixa.

Isso coloca uma linha no topo:

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

Eu fiz um jsFiddle onde você pode verificá-lo em ação.

INSERIR

Para uma borda inserida , use a palavra-chave inserida . Isso coloca uma linha inserida no topo:

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

Várias linhas podem ser adicionadas usando instruções separadas por vírgula. Isso coloca uma linha inserida no topo e à esquerda:

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

Para mais detalhes sobre como box-shadowfunciona, confira a página MDN .

Experimente com sombra (como borda) + borda

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

Eu sei que isso é antigo. Mas sim. Eu prefiro uma solução muito mais curta do que a resposta de Giona

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

Gosto de delimitar meu campo de entrada, remover o contorno do foco e "delinear" a borda:

input {
  border: 1px solid grey;

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

Você também pode fazer isso com uma borda transparente:

input {
  border: 1px solid transparent;

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

A melhor coisa sobre HTML / CSS é que geralmente há mais de uma maneira de obter o mesmo efeito. Aqui está outra solução que faz o que você deseja:

<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/

apenas um lado outlinenão funciona, você pode usar oborder-left/right/top/bottom

se eu obtiver corretamente seu comentário