outline-widthプロパティ

値

次の値を太さとして指定することができます。

• thin – アウトラインを細く表示。
• medium – アウトラインを通常の太さで表示。初期値。
• thick – アウトラインを太く表示。
• 数値 + 任意の単位 – 「px」や「em」等、任意の単位で指定した太さで表示。

上下左右の4辺全てに一括指定することしかできないため、borderプロパティのように特定の辺だけ指定するといったことはできません。

アウトラインは指定した要素の外側に線を敷くため、ボーダーよりも外側に表示されます。親要素のmarginプロパティやpaddingプロパティの領域に重なる点に注意してください。

パターン1

アウトラインの太さに「thin」を指定している例です。

CSSコード例

<style>
.element1 {
	outline-width: thin;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element1"></p>

表示例：

パターン2

アウトラインの太さに「medium」（初期値）を指定している例です。

CSSコード例

<style>
.element2 {
	outline-width: medium;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element2"></p>

表示例：

パターン3

アウトラインの太さに「thick」を指定している例です。

CSSコード例

<style>
.element3 {
	outline-width: thick;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element3"></p>

表示例：

パターン4

アウトラインの太さに「thick」を指定している例です。

CSSコード例

<style>
.element4 {
	outline-width: 20px;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element4"></p>

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。