[CSS]outlineで画像周りに縁取りをする方法

CSSのプロパティでoutlineを使うと画像や要素の周囲をボーダーラインで囲むことができます。

今回はoutlineの使い方を紹介していきます。

outlineで画像や要素の周囲をボーダーで囲む

先にコードを見ていきます。

今回は赤のボックスの周りを青色のボーダーで囲むというCSSを書いています。

書き方としてはoutlineと記述した後に以下のように続きます。

• ボーダーの太さ
• ボーダーの種類
• ボーダーの色

画像や要素から余白をつけてボーダーを描画する

上記のコードでは画像や要素の周囲に余白なしでボーダーを描画していました。

要素とボーダーの間に余白を付けたい場合は、outline-offsetプロパティを利用します。