状況はニッチですが、たとえば文字の周りに二重丸をつけたくなった場合など。
こんな風に作れる方法をご紹介します。
CSSのみ！
セレクタ一つのみ！
楽ちんだし、なんかハンコみたいで可愛いね。
※この方法では、1文字じゃないとうまく二重丸にならないので、複数文字を二重丸で囲みたい場合は疑似要素とか空要素で対応しましょう
まずborderで囲う
文字を囲んでいるボックスにborderをつけます。
border: 1px solid red;これでひとつ丸ができましたね。
そして、outlineをつけます。
outline: 1px solid red;outline、聞き馴染みのない人も多いかもしれませんが、borderの外側につけられる線です。便利。
ただこのままだとborderとoutlineはぴったりくっついちゃって二重線に見えないので、borderとoutlineの距離を離します。
そのために使えるのが outline-offset というプロパティ。
outline-offset: 2px;borderとoutlineの距離を数値で調整できます。
borderの線種でも二重線（double）は指定できるけど、線の色変えたり線同士の距離は変えられないので、
二重丸作るなら border と outline に軍配が上がるかなーと思います。
もしborderでもいい感じに二重丸作れる方法あったら教えてください。double以外で…
ところで、border と outline をどちらも double にしたらどうなるんでしょうね？？
よい二重丸ライフを！◎
