cman.jp > WEBページ作成TOP > CSSリファレンス > 「罫線の太さ設定」
WEBページ作成
広告
border-width 「罫線の太さ設定」
border-width プロパティは罫線の太さの設定を行うことができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | 全て | しない |
広告
border-width の値
【構文】
border-width : [width] ;
| width [太さの指定] ( サンプル ) | |
|---|---|
| border-width: thin; | 細い |
| border-width: medium; | 標準 |
| border-width: thick; | 太い |
| border-width: ～px; | 太さを数値で指定(ex. 1px、10px) |
border-width のサンプル
1.罫線の太さの指定サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線の太さの指定サンプル</title>
<style type="text/css">
<!--
div
{
height: 50px;
width : 70px;
margin: 5px;
float : left;
border: solid;
}
div.s1{ border-width: thin;} /* 細い線 */
div.s2{ border-width: medium;} /* 標準線 */
div.s3{ border-width: thick;} /* 太い線 */
div.s4{ border-width: 1px;} /* 1px */
div.s5{ border-width: 5px;} /* 5px */
div.s6{ border-width: 10px;} /* 10px */
-->
</style>
</head>
<body>
<p style="font-size:12pt; " >罫線の底辺の太さ指定サンプル</p>
<div class="s1">細い線(thin)</div>
<div class="s2">標準線(medium)</div>
<div class="s3">太い線(thick)</div>
<div class="s4">1px の線</div>
<div class="s5">5px の線</div>
<div class="s6">10pxの線</div>
</body>
</html>
関連するCSSプロパティ
| border | 罫線の設定 |
| border-color | 罫線の色設定 |
| border-style | 罫線のスタイル設定 |
| border-bottom | 罫線の底辺の設定 |
| border-bottom-color | 罫線の底辺の色設定 |
| border-bottom-style | 罫線の底辺のスタイル設定 |
| border-bottom-width | 罫線の底辺の太さ設定 |
| border-left | 罫線の左辺の設定 |
| border-left-color | 罫線の左辺の色設定 |
| border-left-style | 罫線の左辺のスタイル設定 |
| border-left-width | 罫線の左辺の太さ設定 |
| border-right | 罫線の右辺の設定 |
| border-right-color | 罫線の右辺の色設定 |
| border-right-style | 罫線の右辺のスタイル設定 |
| border-right-width | 罫線の右辺の太さ設定 |
| border-top | 罫線の上辺の設定 |
| border-top-color | 罫線の上辺の色設定 |
| border-top-style | 罫線の上辺のスタイル設定 |
| border-top-width | 罫線の上辺の太さ設定 |
| 関連するCSS(STYLE) | |
|---|---|
| border | 罫線の設定 |
| border-bottom | 罫線の底辺の設定 |
| border-bottom-color | 罫線の底辺の色設定 |
| border-bottom-left-radius | 左下の角丸 |
| border-bottom-right-radius | 右下の角丸 |
| border-bottom-style | 罫線の底辺のスタイル設定 |
| border-bottom-width | 罫線の底辺の太さ設定 |
| border-collapse | テーブルの罫線の表示方法 |
| border-color | 罫線の色設定 |
| border-left | 罫線の左辺の設定 |
| border-left-color | 罫線の左辺の色設定 |
| border-left-style | 罫線の左辺のスタイル設定 |
| border-left-width | 罫線の左辺の太さ設定 |
| border-radius | 角丸の設定 |
| border-right | 罫線の右辺の設定 |
| border-right-color | 罫線の右辺の色設定 |
| border-right-style | 罫線の右辺のスタイル設定 |
| border-right-width | 罫線の右辺の太さ設定 |
| border-spacing | テーブルの罫線の間隔 |
| border-style | 罫線のスタイル設定 |
| border-top | 罫線の上辺の設定 |
| border-top-color | 罫線の上辺の色設定 |
| border-top-left-radius | 左上の角丸 |
| border-top-right-radius | 右上の角丸 |
| border-top-style | 罫線の上辺のスタイル設定 |
| border-top-width | 罫線の上辺の太さ設定 |
| border-image | 画像を使った罫線の表示 |
| border-image-outset | ボーダーイメージエリアを広げる |
| border-image-repeat | 画像ボーダーの繰り返し方法 |
| border-image-slice | 画像のボーダー使用範囲 |
| border-image-source | ボーダーの使用画像ファイル |
| border-image-width | 画像ボーダーの太さ |
広告