CSS borderプロパティについてのまとめ
- Category ：
- CSS ビギナー向け
CSSで枠線を指定する場合にこのborderプロパティを使うわけなんですが、指定の記述方法はいろいろあるわけなんですよ...。
自分は「border」で一括指定か。「border-top」「border-right」「border-bottom」「border-left」の上下左右個別に一括指定する方法しか使いませんので、今回はこの方法で説明したいと思います。
（これが一番記述が短くて済みますし楽だと思いますよ）
…ここからが続き
borderプロパティ記述例
divの周りに黒い枠線を入れる
div {
border: 1px solid #000000;
}
divの上のみ黒い実線を入れる
div {
border-top: 1px solid #000000;
}
divの右のみ黒い実線を入れる
div {
border-right: 1px solid #000000;
}
divの下のみ黒い実線を入れる
div {
border-bottom: 1px solid #000000;
}
divの左のみ黒い実線を入れる
div {
border-left: 1px solid #000000;
}
border-styleプロパティの種類・表示例
種類
- none
- 枠線なし（ボーダーの幅の値は強制的に0になる)
- dotted
- 点線（丸い点線）
- dashed
- 破線（四角い点線）
- solid
- 実線
- double
- 二重線
- groove
- 立体枠（窪み）
- ridge
- 立体枠（隆起）
- inset
- 立体枠（内側全体が窪み）
- outset
- 立体枠（内側全体が隆起）
表示例
.sample1 {
border: none;
}
.sample2 {
border: 5px dotted #000000;
}
.sample3 {
border: 5px dashed #000000;
}
.sample4 {
border: 5px solid #000000;
}
.sample5 {
border: 5px double #000000;
}
.sample6 {
border: 5px groove #000000;
}
.sample7 {
border: 5px ridge #000000;
}
.sample8 {
border: 5px inset #000000;
}
.sample9 {
border: 5px outset #000000;
}
