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

border-style 「罫線のスタイル設定」

border-style プロパティは罫線のスタイルの設定を行うことができます。

CSS Ver.適用要素継承
2.1全てしない
広告

border-style の値

【構文】

border-style : [style;
style [スタイルの指定] ( サンプル )
border-style: none;非表示(初期値、他と重なる罫線は他のスタイルを優先)
border-style: hidden;非表示(他と重なる罫線は他のスタイルより優先)
border-style: dotted;点線
border-style: dashed;破線
border-style: solid;1本線
border-style: double;2本線
border-style: groove;立体線(窪み)
border-style: ridge;立体線(隆起)
border-style: inset;囲み立体線(窪み)
border-style: outset;囲み立体線(隆起)
ページTOP

border-style のサンプル

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-width: 8px;
        border-color: blue;
    }
    div.s1  { border-style:  dotted; }   /* 点線               */
    div.s2  { border-style:  dashed; }   /* 破線               */
    div.s3  { border-style:  solid;  }   /* 1本線             */
    div.s4  { border-style:  double; }   /* 2本線             */
    div.s5  { border-style:  groove; }   /* 立体線(窪み)     */
    div.s6  { border-style:  ridge;  }   /* 立体線(隆起)     */
    div.s7  { border-style:  inset;  }   /* 囲み立体線(窪み) */
    div.s8  { border-style:  outset; }   /* 囲み立体線(隆起) */
  -->
  </style>
</head>
<body>
<p style="font-size:12pt; " >罫線のスタイル指定サンプル</p>
<div class="s1">点線</div>
<div class="s2">破線</div>
<div class="s3">1本線</div>
<div class="s4">2本線</div>
<div class="s5">立体線(窪み)</div>
<div class="s6">立体線(隆起)</div>
<div class="s7">囲み立体線(窪み)</div>
<div class="s8">囲み立体線(隆起)</div>
</body>
</html>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン