HTML & CSS

レシピ

ボーダー

CSSで枠線(ボーダー)をデザインする

CSSが用意している枠線(ボーダー)のスタイルを使って、HTML要素にデザインを取り入れる方法を解説します。

この記事のポイント

  • CSSで枠線(ボーダー)を設定する
  • 扱うことのできる枠線の種類が分かる

目次

CSSを使って枠線をつける

CSSを使うと、HTMLに様々な枠線(ボーダー)をつけることができます。

枠線の設定例
枠線の設定例

コード例

<style>
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border-radius: 10px;
	border: 2px solid #007bd1;
	border-top-style: dotted;
	border-bottom-style: dashed;
}
</style>
<section>
	<figure>
	<img src="images/pic_sample.jpg" alt="NEWS">
	<figcaption>NEWS</figcaption>
	</figure>
</section>

上記のコードではborderプロパティを使って4辺(上下左右)の枠線を設定し、そのすぐ後にborder-top-styleプロパティborder-top-styleプロパティを使って上下の枠線のみ点線に設定しています。

今回はCSSで扱うことのできる枠線の種類と設定方法を解説します。

枠線の種類

CSSでは次の10種類の枠線を指定することができます。

線の種類
none枠線を表示しない。
hidden枠線を表示しない。テーブルの枠線と競合した時はこちらを優先する。
solid直線の枠線を表示。
double二重の枠線を表示。線の太さが2px以下の場合は実践になる。
dotted点線(破線)。
dashed点線(破線)。「dotted」よりも目の粗い点線。
groove立体的な枠線を表示。
ridge立体的な枠線を表示。「groove」と対照的な表示。
inset凹みのある枠線を表示。
outset凸みのある枠線を表示。「inset」と対照的な表示。
枠線の表示例
枠線の表示例

コード例

<style>
.type1 {
	border: 2px none #999;
}
.type2 {
	border: 2px hidden #999;
}
.type3 {
	border: 2px solid #999;
}
.type4 {
	border: 3px double #999;
}
.type5 {
	border: 2px dotted #999;
}
.type6 {
	border: 2px dashed #999;
}
.type7 {
	border: 4px groove #ccc;
}
.type8 {
	border: 4px ridge #ccc;
}
.type9 {
	border: 4px inset #ccc;
}
.type10 {
	border: 4px outset #ccc;
}
</style>
<p class="type1">none</p>
<p class="type2">hidden</p>
<p class="type3">solid</p>
<p class="type4">double</p>
<p class="type5">dotted</p>
<p class="type6">dashed</p>
<p class="type7">groove</p>
<p class="type8">ridge</p>
<p class="type9">inset</p>
<p class="type10">outset</p>

サイトのデザインに応じて、様々な枠線を設定することができます。
また、主要なブラウザに全て対応していることもポイントです。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。