2-tone border

by ScottRippey

HTML

<div> Using "border-style: <b>ridge</b>" or "border-style: <b>groove</b>" gives us a 2-color border. </div>
<div style="border-color: red"> The 2nd color is a darkened version of the specified border color. </div>
<div style="border-color: green"> For a bottom border, "ridge" makes the BOTTOM line darker, </div>
<div style="border-style: groove"> and "groove" makes the TOP line darker. </div>
<div> The darkening is about 30%, so you can't simply choose 2 good colors </div>

CSS

div {
    border: 0 ridge yellow;
    border-bottom-width: 20px;
}
div:last-child {
    border-bottom-width: 0;
}