¿Es posible imitar el borde de la cresta CSS, pero con colores personalizados?

Question

Esencialmente deseo tener una "cresta" borde de estilo pero con colores personalizados. Con border-style: ridge parece que no puedes poner diferentes colores, el navegador solo usa uno un poco más claro y uno un poco más oscuro que el color especificado.

Mi solución actual es esta, pero no es ideal debido al <div>

adicional

<div id="header">
  <!-- block with border-bottom set to `1px solid #2e3436`-->
</div>
<div style="height: 1px; background-color: #fbe995;"></div>

El siguiente elemento debajo de este no puede tener su borde superior establecido en ese color (tiene sus propios estilos y está separado), por lo que esa idea está descartada. ¿Hay algo más que pueda probar?

Answer 1

Su ejemplo parece sugerir que desea crear una línea acanalada como un separador entre su encabezado y el resto, en lugar de un borde acanalado alrededor de un elemento. ¿Por qué no usas un hr para eso, ya que eso es exactamente para lo que sirve?

Luego puede darle un borde y establecer sus propios colores en los diferentes lados.

Answer 2

No según las especificaciones para CSS 3 (Sección 8.5.3):

  

El color de los bordes dibujados para los valores   de 'ranura', 'cresta', 'inserción' y   'inicio' depende del elemento   propiedades de color del borde, pero los UA pueden   elegir su propio algoritmo para   calcule los colores reales utilizados.

Técnicamente supongo que "elegir su propio algoritmo" podría implicar permitir que el desarrollador los configure, pero ningún agente de usuario parece hacer eso en este momento. Por supuesto, incluso si lo hicieran, tendrías una solución solo para ese motor de renderizado.

Answer 3

No hay una forma oficial de hacer esto, pero probablemente puedas imitar el efecto. Un borde acanalado es realmente solo un borde insertado que tiene un borde inicial a su alrededor (que a su vez es solo un borde sólido con colores de borde ligeramente diferentes para izquierda / arriba y abajo / derecha).

Algo en este sentido debería proporcionarle una aproximación bastante buena de lo que desea, o exactamente lo que estaba buscando.

 .inset{
      margin:0px;
      border: 1px inset #abc;
 }
 .outset{
      padding:0px;
      border:1px outset #cba;
 }

<div class='outset'>
     <div class='inset'>
          content goes here
     </div>
</div>

Answer 4

<style>
.a
{
        border: solid yellow 2px;
        border-top-color:red;
        border-left-color:red;

}
.b
{
        border: solid red 2px;
        border-top-color:yellow;
        border-left-color:yellow;
}
</style>
<div class='a'>
  <div class='b'>
        some text
  </div>
</div>