【CSS】ボーダー（境界線）をつける - PCゲーマーのWebデザイン備忘録

HTMLの要素に「border」を指定していすることで、ボーダー（境界線）をつけることができます。

ボーダーの種類

ボーダーには、solid（実線）、dashed（破線）、double（二重線）、dotted（点線）があります。他にも種類がありますが、あまり使われません。

実行例

f:id:game-web-design:20140922113146p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字の枠線</title>
<style>
.border1, .border2, .border3, .border4, .border5, .border6{
  padding: 20px;
  margin: 10px;
}

.border1{
  border:#333 solid 1px;
}
.border2{
  border: #ccc solid 4px;
}
.border3{
  border: #f00 solid 1px;
}
.border4{
  border: #333 dashed 1px;
}
.border5{
  border-top: #2E9961 solid 2px;
  border-right: #2E9961 dashed 1px;
  border-bottom: #2E9961 dashed 1px;
  border-left: #2E9961 solid 12px;
}
.border6{
  border-top: #21669D solid 3px;
  border-bottom: #21669D double 4px;
  border-left: #21669D solid 2px;
}

</style>

</head>

<body>

<div id="box1">
<p class="border1">テキストの囲みを表現したい［標準］</p>
<p class="border2">テキストの囲みを表現したい［線の太さ］</p>
<p class="border3">テキストの囲みを表現したい［線のカラー］</p>
<p class="border4">テキストの囲みを表現したい［線のスタイル］</p>
<p class="border5">テキストの囲みを表現したい［複数の指定］</p>
<p class="border6">テキストの囲みを表現したい［複数の指定］</p>
</div>

</body>
</html>