borderプロパティで枠をデザインする

今回はborderプロパティを使って、色々な枠線を作っていきます。

シンプル

シンプルに黒の線で囲んでいます。

<div class="border1">sample sample sample sample sample</div>

.border1 {
  padding: 0.5em 1em;
  font-weight: bold;
  display: inline-block;
  border: solid 3px #000;
}

丸み

border-radiusで角に丸みをつけています。

<div class="border2">sample sample sample sample sample</div>

.border2 {
  padding: 0.5em 1em;
  font-weight: bold;
  display: inline-block;
  border: solid 3px #000;
  border-radius: 10px;
}

二重線

borderプロパティ「double」を使用して、二重線の枠を作っています。

<div class="border3">sample sample sample sample sample</div>

.border3 {
  padding: 0.5em 1em;
  font-weight: bold;
  display: inline-block;
  border: double 6px #000;
}

点線

borderプロパティ「dashed」を使用して、点線の枠を作っています。

<div class="border4">sample sample sample sample sample</div>

.border4 {
  padding: 0.5em 1em;
  font-weight: bold;
  display: inline-block;
  border: dashed 3px #000;
}

影

box-shadowで影をつけています。

<div class="border5">sample sample sample sample sample</div>

.border5 {
  padding: 0.5em 1em;
  font-weight: bold;
  display: inline-block;
  border: solid 3px #000;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

タイトル

枠にタイトルを入力することができます。

<div class="border6">
  <span class="box-title">Sample</span>
  <p>sample sample sample sample sample</p>
</div>

.border6 {
  position: relative;
  padding: 0 1em;
  display: inline-block;
  border: dashed 3px #aaa;
  border-radius: 10px;
}
.border6 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: #000;
}

gif + 枠線

imgにも枠線をつけることができます。

© Unity Technologies Japan/UCL