WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「罫線の太さ設定」

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)
ページTOP

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罫線の上辺の太さ設定
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン