esbozar en un solo borde

Cómo aplicar un borde insertado en un elemento HTML, pero solo en un lado del mismo. Hasta ahora, he estado usando una imagen para hacer eso (GIF / PNG) que luego usaría como fondo y la estiraré (repeat-x) y la posicioné un poco lejos de la parte superior de mi bloque. Recientemente, descubrí el esquema de propiedad de CSS, ¡que 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, ¿tiene algún truco de 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

El esquema realmente se aplica a todo el elemento .

Ahora que veo tu imagen, esta es la forma de 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; } 
 

Some content comes here...

Puede usar box-shadow para crear un contorno en un lado. Al igual que el outline , box-shadow no 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 múltiples líneas usando declaraciones separadas por comas. Esto pone una línea insertada en la parte superior y la izquierda:

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

Para más detalles sobre cómo funciona box-shadow , mira la página MDN .

Pruebe con Shadow (como borde) + borde

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

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

  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 outline lateral no funcionará, puede usar el border-left/right/top/bottom

si recibo correctamente tu comentario

enter image description here