記事の内容
border-widthプロパティ
border-widthは、ボーダーの太さを指定するためのCSSプロパティです。
border-widthプロパティ
記法
.クラス名 {
border-width: 上辺 右辺 下辺 左辺;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>border-widthプロパティに関して</title>
</head>
<body>
<div class="boder-width-val1">ボーダー設定値1つ</div>
<div class="boder-width-val2">ボーダー設定値2つ</div>
<div class="boder-width-val3">ボーダー設定値3つ</div>
<div class="boder-width-val4">ボーダー設定値4つ</div>
</body>
</html>div {
margin: 5px;
}
.boder-width-val1 {
border-style: solid;
border-width: 1px;
}
.boder-width-val2 {
border-style: solid;
border-width: 1px 3px;
}
.boder-width-val3 {
border-style: solid;
border-width: 1px 3px 7px;
}
.boder-width-val4 {
border-style: solid;
border-width: 1px 3px 7px 10px;
}出力結果
ボーダー設定値1つ
ボーダー設定値2つ
ボーダー設定値3つ
ボーダー設定値4つ
ボーダー幅を個別指定
border-widthプロパティ(位置指定)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>border-widthプロパティ(位置指定)に関して</title>
</head>
<body>
<div class="boder-top-width">上辺指定</div>
<div class="boder-right-width">右辺指定</div>
<div class="boder-bottom-width">下辺指定</div>
<div class="boder-left-width">左辺指定</div>
</body>
</html>div {
margin: 5px;
}
.boder-top-width {
border-style: solid;
border-top-width: 10px;
}
.boder-right-width {
border-style: solid;
border-right-width: 10px;
}
.boder-bottom-width {
border-style: solid;
border-bottom-width: 10px;
}
.boder-left-width {
border-style: solid;
border-left-width: 10px;
}出力結果
上辺指定
右辺指定
下辺指定
左辺指定