borderプロパティは「枠線」を指定する場合に使用します。
html
<div class="square_border"></div>
css
.square_border {
width: 100px;
height: 100px;
background-color: #39a9d6;
border: 5px solid #2d424f;
}
設定方法
指定方法
border: 幅 スタイル 色（一括指定）
border-top: 幅 スタイル 色（上のみ）
border-left: 幅 スタイル 色（左のみ）
border-bottom: 幅 スタイル 色（下のみ）
border-right: 幅 スタイル 色（右のみ）
幅
- 数値
- px / em 等で指定
- キーワード
- thin（細い）/ medium（普通）/ thick（太い）※ブラウザにより太さが異なる
スタイル
- none
- 非表示で太さ0（初期値）
- hidden
- 非表示で太さ0
- solid
- 1本線
- double
- 2本線
- groove
- 立体的（窪んだ線）
- ridge
- 立体的（隆起した線）
- inset
- 上・左が暗く、下・右が明るく表示される
- outset
- 上・左が明るく、下・右が暗く表示される
- dashed
- 破線
- dotted
- 点線
色
- 色指定
- 「#000000」（色コード）又は「カラーネーム」（red や gray 等）
- 透明
- transparent（初期値）
個別に設定
html
<div class="square_triangle"></div>
css
.square_triangle {
width: 0;
height: 0;
border-top: 50px solid #59bde0;
border-right: 50px solid #39a9d6;
border-bottom: 50px solid #2d424f;
border-left: 50px solid #2d8fb5;
}
個別に設定2
html
<div class="square_triangle2"></div>
css
.square_triangle2 {
width: 40px;
height: 40px;
background-color: #dce0e0;
border-top: 50px solid #59bde0;
border-right: 50px solid #39a9d6;
border-bottom: 50px solid #2d424f;
border-left: 50px solid #2d8fb5;
}
