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

border-top 「罫線の上辺の設定」

border-top プロパティは罫線の上辺に関する設定をまとめて行うことができます。

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

border-top の値

【構文】

border-top : [style] [width] [color;
style [スタイルの指定] ( サンプル )
border-top: none;非表示(初期値、他と重なる罫線は他のスタイルを優先)
border-top: hidden;非表示(他と重なる罫線は他のスタイルより優先)
border-top: dotted;点線
border-top: dashed;破線
border-top: solid;1本線
border-top: double;2本線
border-top: groove;立体線(窪み)
border-top: ridge;立体線(隆起)
border-top: inset;囲み立体線(窪み)
border-top: outset;囲み立体線(隆起)
width [太さの指定] ( サンプル )
border-top: thin;細い
border-top: medium;標準
border-top: thick;太い
border-top: ~px;太さを数値で指定(ex. 1px、10px)
color [背景色の指定] ( サンプル )
border-top: #rrggbb;16進数RGB指定 [例] #00ffff、#660033 (色作成)
border-top: カラー名;カラー名指定 [例] red、bule (一覧)
border-top: rgb(r, g, b);10進数RGB指定 [例] rgb(0,255,255) (色作成)
border-top: rgba(r, g, b, a);透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成)
※ CSS3の機能
border-top: hsl(h, l%, s%);HSL指定 [例] hsl(10,50%,90%) (色作成)
border-top: hsla(h, l%, s%, a);透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成)
※ CSS3の機能
border-top: transparent;透明(無色)
ページTOP

border-top のサンプル

1.罫線のスタイルの指定

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線のスタイル指定サンプル</title>
<style type="text/css">
<!--
  p.s1  { border-top: dotted; }   /* 点線 */
  p.s2  { border-top: dashed; }   /* 破線 */
  p.s3  { border-top: solid;  }   /* 1本線 */
  p.s4  { border-top: double; }   /* 2本線 */
  p.s5  { border-top: groove; }   /* 立体線(窪み) */
  p.s6  { border-top: ridge;  }   /* 立体線(隆起) */
  p.s7  { border-top: inset;  }   /* 囲み立体線(窪み) */
  p.s8  { border-top: outset; }   /* 囲み立体線(隆起) */
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線のスタイル指定サンプル</span>
<p class="s1">点線</p>
<p class="s2">破線</p>
<p class="s3">1本線</p>
<p class="s4">2本線</p>
<p class="s5">立体線(窪み)</p>
<p class="s6">立体線(隆起)</p>
<p class="s7">囲み立体線(窪み)</p>
<p class="s8">囲み立体線(隆起)</p>
</body>
</html>

2.罫線の太さ、色の指定サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線の太さ、色の指定サンプル</title>
<style type="text/css">
<!--
  p.s1  { border-top: thin   #ff0000           solid; }  /* 細い線、赤 */
  p.s2  { border-top: medium red               solid; }  /* 標準線、赤 */
  p.s3  { border-top: thick  #800080           solid; }  /* 太い線、紫 */
  p.s4  { border-top: 1px    rgb(128,0,128)    solid; }  /* 1px   、紫 */
  p.s5  { border-top: 5px    #000000           solid; }  /* 5px   、黒 */
  p.s6  { border-top: 10px   rgba(0,255,0,0.5) solid; }  /* 10px  、緑半透明 */
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線の太さ、色の指定サンプル</span>
<p class="s1">細い線(thin)、赤</p>
<p class="s2">標準線(medium)、赤</p>
<p class="s3">太い線(thick)、紫</p>
<p class="s4">1px の線、紫</p>
<p class="s5">5px の線、黒</p>
<p class="s6">10pxの線、緑半透明</p>
</body>
</html>

3.罫線のスタイル、太さ、色の組合せ指定サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線のスタイル、色、太さ組合せ指定サンプル</title>
<style type="text/css">
<!--
  td.s1 { border-top: medium #00ff00   groove; }
  td.s2 { border-top: medium #ff0000   ridge;  }
  td.s3 { border-top: thick  #0000ff   ridge;  }
  td.s4 { border-top: thick  #00ffff   inset;  }
  td.s5 { border-top: medium #ff00ff   outset; }
  td.s6 { border-top: thick  #ffff00   outset; }
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線のスタイル、色、太さの指定サンプル</span>
<br><br>
<table style="width:100%;">
  <tr><td class="s1">標準線、緑  、立体線(窪み)</td></tr>
  <tr><td class="s2">標準線、赤  、立体線(隆起)</td></tr>
  <tr><td class="s3">太い線、青  、立体線(隆起)</td></tr>
  <tr><td class="s4">太い線、水色 、囲み立体線(窪み)</td></tr>
  <tr><td class="s5">標準線、ピンク、囲み立体線(隆起)</td></tr>
  <tr><td class="s6">標準線、黄色 、囲み立体線(隆起)</td></tr>
  <tr>
</body>
</html>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン