contorno en un solo borde

Cómo aplicar un borde insertado en un elemento HTML, pero solo en un lado. Hasta ahora, he estado usando una imagen para hacer eso (GIF / PNG) que luego usaría como fondo y la estiraría (repeat-x) y colocaría un poco fuera de la parte superior de mi bloque. Recientemente, descubrí la propiedad CSS de esquema , ¡lo cual es genial! Pero parece rodear todo el bloque ... ¿Es posible usar esta propiedad de contorno para hacerlo solo en un borde? Además, si no es así, ¿tiene algún truco CSS que pueda reemplazar la imagen de fondo? (para poder personalizar los colores del contorno más tarde usando CSS, etc.). ¡Gracias por adelantado!

Aquí hay una imagen de lo que estoy tratando de lograr: http://exiledesigns.com/stack.jpg

De hecho, el esquema se aplica a todo el elemento .

Ahora que veo tu imagen, aquí te explicamos cómo lograrlo.

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

(O ver demostración externa ) .

Todos los tamaños y colores son solo marcadores de posición, puede cambiarlos para que coincidan con el resultado deseado exacto.

Nota importante : .element debe tener display:block;(predeterminado para un div) para que esto funcione. Si no es el caso, proporcione su código completo para que pueda elaborar una respuesta específica.

Puede utilizar box-shadowpara crear un contorno en un lado. Al igual que outline, box-shadowno cambia el tamaño del modelo de caja.

Esto pone una línea en la parte superior:

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

Hice un jsFiddle donde puedes verlo en acción.

RECUADRO

Para un borde insertado , use la palabra clave insertada . Esto pone una línea insertada en la parte superior:

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

Se pueden agregar varias líneas usando declaraciones separadas por comas. Esto pone una línea insertada en la parte superior e izquierda:

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

Para obtener más detalles sobre cómo box-shadowfunciona, consulte la página de MDN .

Prueba con Sombra (como borde) + Borde

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

Sé que esto es viejo. Pero sí. Prefiero una solución mucho más corta que la respuesta de Giona

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

Me gusta darle un borde a mi campo de entrada, quitar el contorno en el foco y "delinear" el borde en su lugar:

input {
  border: 1px solid grey;

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

También puedes hacerlo con un borde transparente:

input {
  border: 1px solid transparent;

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

Lo mejor de HTML / CSS es que normalmente hay más de una forma de lograr el mismo efecto. Aquí hay otra solución que hace lo que quiere:

<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 lado outlineno funcionará, puedes usar elborder-left/right/top/bottom

si recibo correctamente tu comentario