↑のh1見出しとか、サイドバーのh3に使ってるボーダーですが、今まで色の異なるボーダーの引き方がわからなくて、いつも背景画像を使っていました。

背景画像を使わずにCSSだけでなんとかしたかった。

で、天から聞こえて来た声が「:after使えばいいじゃない」。

#content article h1 {
    font-weight: bold;
    font-size: 150%;
    text-shadow: 0 0 2px rgba(6, 45, 124, 0.8);
    color: #fff;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #aec5e1;
    margin: 0 0 10px 0;
}

#content article h1:after {
    border-bottom: 1px solid #5e8ec5;
    content: "";
    display: block;
    height: 1px;
    margin: 0 0 -10px;
}

:afterの時に、「content=””」と「height:1px」を入れないとそもそもレンダリングされなかったので、仕方なく入れました。
「margin: 0 0 -10px」は位置の調整用です。

• ツイート