Is it possible to mimic CSS ridge border, but with custom colors?

Question

I essentially wish to have a "ridge" style border but with custom colors. With border-style: ridge it seems you can't put different colours in, the browser just uses one slightly lighter and one slightly darker than the colour specified.

My current solution is this, but it's not ideal due to the extra <div>

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

The next item below this can't have its top border set to that colour (it has its own styles and is separate), so that idea is out. Is there anything else I can try?

Answer 1

Your example seems to suggest you want to create a ridged line as a separator between your header and the rest, rather than a ridged border around an element. Why don't you use a hr for that, since that's pretty much exactly what it's for?

You can then give it a border and set your own colors on the different sides.

Answer 2

Not per the spec for CSS 3 (Section 8.5.3):

The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used.

Technically I suppose that "choose their own algorithm" could involve allowing the developer to set them, but no user-agent seems to do that at this point. Of course, even if they did, you'd have a solution for only that rendering engine.

Answer 3

There's no official way to do this, but you could probably mimic the effect. A ridged border is really just an inset border which itself has an outset border around it (which in turn is just a solid border with slightly different border colors for left/top and bottom/right).

Something along these lines should get you a pretty good approximation of what you want, or exactly what you were looking for.

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