contorno su un solo bordo

Come applicare un bordo interno a un elemento HTML, ma solo su un lato di esso. Fino ad ora, ho utilizzato un'immagine per farlo (GIF / PNG) che poi userei come sfondo e la allungherei (ripeti-x) e posizionerei un po 'fuori dalla parte superiore del mio blocco. Recentemente, ho scoperto il contorno proprietà CSS, che è grande! Ma sembra circondare l'intero blocco ... È forse possibile utilizzare questa proprietà outline per farlo su un solo bordo? Inoltre, se no, hai qualche trucco CSS che potrebbe sostituire l'immagine di sfondo? (in modo da poter personalizzare i colori del contorno in seguito utilizzando CSS, ecc.). Grazie in anticipo!

Ecco un'immagine di ciò che sto cercando di ottenere: http://exiledesigns.com/stack.jpg

Lo schema infatti si applica all'intero elemento .

Ora che vedo la tua immagine, ecco come ottenerla.

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

(Oppure guarda la demo esterna. )

Tutte le dimensioni e i colori sono solo segnaposto, puoi cambiarli in modo che corrispondano esattamente al risultato desiderato.

Nota importante : .element deve avere display:block;(impostazione predefinita per un div) affinché funzioni. In caso contrario, fornire il codice completo, in modo che possa elaborare una risposta specifica.

È possibile utilizzare box-shadowper creare un contorno su un lato. Ad esempio outline, box-shadownon cambia la dimensione del modello di scatola.

Questo mette una linea in cima:

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

Ho creato un jsFiddle dove puoi verificarlo in azione.

INSET

Per un bordo inserito , usa la parola chiave nel riquadro . Questo inserisce una riga in cima:

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

È possibile aggiungere più righe utilizzando istruzioni separate da virgole. Questo inserisce una linea inserita in alto e a sinistra:

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

Per maggiori dettagli su come box-shadowfunziona, controlla la pagina MDN .

Prova con Shadow (Like border) + Border

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

So che questo è vecchio. Ma si. Preferisco una soluzione molto più breve, rispetto alla risposta di Giona

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

Mi piace dare un bordo al mio campo di input, rimuovere il contorno sullo stato attivo e invece "delineare" il bordo:

input {
  border: 1px solid grey;

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

Puoi farlo anche con un bordo trasparente:

input {
  border: 1px solid transparent;

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

Il bello dell'HTML / CSS è che di solito c'è più di un modo per ottenere lo stesso effetto. Ecco un'altra soluzione che fa quello che vuoi:

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

solo un lato outlinenon funzionerà, puoi usare il fileborder-left/right/top/bottom

se ricevo correttamente il tuo commento