CSSで内側に線を描くボーダーインラインのデザイン集

2021-02-10CSS デザイン サンプル集,CSS

CSSでHTML要素の内側に線を描画するインラインボーダーのデザインのサンプルコード集です。

内側に線を描く方法として、4種類のパターンを紹介しています。

サンプルでの見え方は殆ど同じになっていますが、それぞれメリットとデメリットがありますのでご確認下さい。

outline（内側に描画）

outlineでの枠線にoutline-offsetにて、マイナス値を指定して内側に枠線を描画するサンプルコードです。

See the Pen CSS | backdrop-filter design 02 by yochans (@yochans) on CodePen.

<div class="container">
		<ul>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>PHP</li>
			<li>Python</li>
		</ul>
</div>

この書き方のメリットとしてHTML内の内側の位置を指定していますので、widthが100％を超えてしまいはみ出すという事は起こりません。

.container{
	width: 1000px;
	max-width: 96%;
	margin: 20px auto;
	padding: 2px;
	background: rgb(255, 105, 180);
	font: 16px sans-serif;
	color: #FFF;
	outline: 4px solid rgb(255, 255, 255);
	outline-offset: -8px;
}

outline（外側に描画）

See the Pen CSS | Border inside with outline B by yochans (@yochans) on CodePen.

<div class="container">
		<ul>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>PHP</li>
			<li>Python</li>
		</ul>
</div>

この書き方のメリットとしてHTML要素の外側に距離・位置を指定していますので、HTML要素とoutlineの間に透明のmarginが発生します。

内側の枠線が透明という事になりまので、周りの要素やサイトの背景色、カラーテーマを意識する事なく馴染みやすいです。

.container{
	width: 1000px;
	max-width: 96%;
	margin: 20px auto;
	padding: 2px;
	background: rgb(255, 105, 180);
	font: 16px sans-serif;
	color: #FFF;
	outline: 4px solid rgb(255, 255, 255);
	outline-offset: -8px;
}

borderとbox-shadow

borderとbox-shadowを使って内側にボーダーを描いているパターンです。

borderで背景色とは別の色で枠線を描き、box-shadowでその周りにもうひとつ枠線を描く事でborderの線が内側にあるように見せています。

See the Pen CSS | Border inside with box-shadow by yochans (@yochans) on CodePen.

<div class="container">
		<ul>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>PHP</li>
			<li>Python</li>
		</ul>
</div>

.container{
	width: 1000px;
	max-width: 98%;
	margin: 20px auto;
	padding: 2px;
	background: #1e90ff;
	font: 16px sans-serif;
	color: #FFF;
	border-radius: 40px;
	box-shadow: 0 0 0 3px #FFF, 0 0 0 8px #1e90ff;
	box-sizing: border-box;
}

box-shadow

box-shadowを2重に使って内側にボーダーを描いているように見せるパターンです。

box-shadowを背景色と枠線にする色で作成して、並べる事で内側に枠線あるように見せています。

See the Pen CSS | Border inside with border A by yochans (@yochans) on CodePen.

<div class="container">
		<ul>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>PHP</li>
			<li>Python</li>
		</ul>
</div>

.container{
	width: 1000px;
	max-width: 98%;
	margin: 20px auto;
	padding: 2px;
	background: #1e90ff;
	font: 16px sans-serif;
	color: #FFF;
	border-radius: 40px;
	box-shadow: 0 0 0 3px #FFF, 0 0 0 8px #1e90ff;
	box-sizing: border-box;
}

メリットのひとつとして多重線も描く事が可能です。

box-shadow（inset）

box-shadowのinsetを使って内側に向かってボーダーを描いているパターンです。

1つ目のbox-shadowで背景色と同じ色で外側枠線を描き、2つ目のbox-shadowでその内側にもうひとつ枠線を描く事で2つ目の枠線が内側にあるように見えます。

See the Pen CSS | Border inside with box-shadow（inset） by yochans (@yochans) on CodePen.

<div class="container">
		<ul>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>PHP</li>
			<li>Python</li>
		</ul>
</div>

.container{
	width: 1000px;
	max-width: 98%;
	margin: 20px auto;
	padding: 2px;
	background: #ff69b4;
	font: 16px sans-serif;
	color: #FFF;
	border-radius: 40px;
	box-shadow: 0 0 0 4px #ff69b4 inset, 0 0 0 8px #FFF inset;
	box-sizing: border-box;
}