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

border-right-color 「罫線の右辺の色設定」

border-right-color プロパティは罫線の色の設定を行うことができます。

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

border-right-color の値

【構文】

border-right-color : [color;
color [背景色の指定] ( サンプル )
border-right-color: #rrggbb;16進数RGB指定 [例] #00ffff、#660033 (色作成)
border-right-color: カラー名;カラー名指定 [例] red、bule (一覧)
border-right-color: rgb(r, g, b);10進数RGB指定 [例] rgb(0,255,255) (色作成)
border-right-color: rgba(r, g, b, a);透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成)
※ CSS3の機能
border-right-color: hsl(h, l%, s%);HSL指定 [例] hsl(10,50%,90%) (色作成)
border-right-color: hsla(h, l%, s%, a);透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成)
※ CSS3の機能
border-right-color: transparent;透明(無色)
ページTOP

border-right-color のサンプル

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線の色の指定サンプル</title>
  <style type="text/css">
  <!--
    div
    {
        height: 50px;
        margin: 5px;
        float : left;
    }
    div.s1
    {
        border-right-color: #ff0000;              /* 赤指定1 */
        border-right-style: solid;
    }  
    div.s2
    {
        border-right-color: red;                  /* 赤指定2 */
        border-right-style: solid;
    }
    div.s3
    {
        border-right-color: rgb(255,0,0);         /* 赤指定3 */
        border-right-style: solid;
    }
    div.s4
    {
        border-right-color: hsl(0,100%,50%);      /* 赤指定4 */
        border-right-style: solid;
    }
    div.s5
    {
        border-right-color: rgba(255,0,0,0.5);    /* 赤半透明指定1 */
        border-right-style: solid;
    }
    div.s6
    {
        border-right-color: hsla(0,100%,50%,0.5); /* 赤半透明指定2 */
        border-right-style: solid;
    }
  -->
  </style>
</head>
<body>
<p style="font-size:12pt; " >罫線の色の指定サンプル</p>
<div class="s1">赤指定1</div>
<div class="s2">赤指定2</div>
<div class="s3">赤指定3</div>
<div class="s4">赤指定4</div>
<div class="s5">赤半透明1</div>
<div class="s6">赤半透明2</div>
</body>
</html>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン