CSSで枠線を2本引きたいとき

CSSで枠線を2本引くデザインって割と多いけど、少し戸惑ったので備忘録です。

cssの構造

外側の枠線：outline

outline: 3px solid black;

枠線同士の距離感：outline-offset

outline-offset: 10px;

内側の枠線：border

border: 1px solid black;

完成イメージ

後はpaddingなりでコンテンツのエリアを確保してあげればいい感じになると思います。