枠線

border

枠線の設定をまとめて記述する

value	description
`1px solid rgb(56, 189, 248)`	1px の実線の`rgb(56, 189, 248)`色の枠線を設定する
`1px rgb(56, 189, 248) dashed`	1px の破線の`rgb(56, 189, 248)`色の枠線を設定する
`rgb(56, 189, 248) dotted 1px`	1px の点線の`rgb(56, 189, 248)`色の枠線を設定する

Demo

Hello, world.....

<div class="box box-1">
  Hello, world.....
</div>
<div class="box box-2">
  Hello, world.....
</div>
<div class="box box-3">
  Hello, world.....
</div>

.box-1 {
  border: 2px solid rgb(56, 189, 248);
}
.box-2 {
  border: 2px dashed rgb(56, 189, 248);
}
.box-3 {
  border: 2px dotted rgb(56, 189, 248);
}

.box {
  padding: 12px;
  margin: 12px;
}

概要

border-width, border-style, border-colorのプロパティをまとめて設定するショートハンドです。通常これらを別々に設定することは稀で、borderでまとめて指定する場合が多いです。


`border-width`	枠線の幅を指定します	`px`で指定する場合がほとんどです
`border-style`	枠線のスタイルを指定します	`solid` `dashed` `dotted` `double` etc...(※)
`border-color`	枠線の色を指定します

※ ridge groove inset outset などがありますが、ほぼ使わないでしょう

以下の二つは等価です。

.box {
  border: 2px solid rgb(56, 189, 248);
}

.box {
  border-width: 2px;
  border-style: solid;
  border-color: rgb(56, 189, 248);
}

境界線を個別に指定する

境界線を個別に指定するには、border-top, border-right, border-bottom, border-leftを利用します。もちろん、border-top-widthなどを利用して個別に設定することも可能です。

.box {
  /* 上下にのみ枠線を引く */
  border-top: 2px solid rgb(56, 189, 248);
  border-bottom: 2px solid rgb(56, 189, 248);
}

border

Demo

概要

境界線を個別に指定する

関連

参照