今回はbox-shadowプロパティを利用して、一個の要素で外側と内側にボーダー線を表示する方法をご紹介いたします。

ここでは、ボーダー関係のプロパティのみ記述しています。

2行目の「border: 1px solid #333;」で外側のボーダー線を表示しています。

5行目から6行目の「-webkit-box-shadow」で内側のボーダー線を表示しています。

5行目にある「inset」が重要でinset を指定すると、影をボックスの内側に描画するようになります。また、「box-shadow」は「,(コンマ区切)」で複数の影を描画することができます。

5行目の「inset 1px 1px 1px rgba(255,255,255,1)」で内側に横方向である左(1px)、 縦方向である上(1px)、ぼかし(1px)、色とopacityの透過(255,255,255,1)を決定し、6行目の「inset -1px -1px 1px rgba(255,255,255,1);」で内側に横方向である右(-1px)、 縦方向である下(-1px)、ぼかし(1px)、色とopacityの透過(255,255,255,1)を決定しています。

この時、透過プロパティであるopacity、(255,255,255,1)の「1」を記述しないと、内側に線が表示されません。この数値は0.5などの小数点を指定することもできますが、よりはっきりと線を表示するために「1」と記述します。また「(255,255,255）」はRGBで白色を表現しています。

「rgba」の「rgb」は「RGB(red・green・blue)」で「a」は「alpha(色の透明度)」を表しています。

1
2
3
4
5
6
7

a.border {
  border: 1px solid #333;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,1),
              inset -1px -1px 1px rgba(255,255,255,1);
  -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,1),
                      inset -1px -1px 1px rgba(255,255,255,1);
}

リンクボタンを想定してa要素にスタイルを適用しました。

1
2
3

<a href="#" class="border">
    外側と内側に角丸の線
</a>

a要素なので「display: block;」でブロック要素に、ボタンらしく見せるため、幅やパディング、「-webkit-border-radius」で角丸を表現しています。

内側の線を「box-shadow」で表現しているので、やや薄く感じますが、内側に白色の線が表示されていることがわかります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a.border {
  display: block;
  width: 200px;
  padding: 10px;
  border: 1px solid #333;
  color: #333;
  text-decoration: none;
  background: #CCC;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,1),
              inset -1px -1px 1px rgba(255,255,255,1);
  -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,1),
                      inset -1px -1px 1px rgba(255,255,255,1);
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

HTML

1
2
3

<a href="#" class="border">
    外側と内側に角丸の線
</a>