• Home
  • Web制作
  • 【CSS】縁取りを極める！ border-styleプロパティ徹底解説

【CSS】縁取りを極める！ border-styleプロパティ徹底解説

schedule
Tags: CSS

はじめに

Webページを制作する上で、要素を際立たせたり、視覚的な区切りをつけたりするために「境界線」は欠かせません。この境界線を思い通りに操ることができれば、Webページの表現力は格段に向上します。

そこで今回は、CSSの border-styleプロパティ について解説いたします。基本的な使い方から、様々な線種、そして知っておくと便利な応用テクニックまで、具体的なコード例を交えながら詳しくご紹介いたします。

あわせて読みたい
CSSのborderでデザインをブラッシュアップ！表現の幅を広げるテクニック集

1. border-styleプロパティとは？

border-styleプロパティは、要素に適用する境界線の線種を指定するためのプロパティです。

例えば、実線や点線、破線など、様々な線種を指定することができます。

2. 基本的な線種の指定方法

border-styleプロパティで指定できる線種は、大きく分けて以下の9種類があります。

  • solid: 実線
  • dotted: 点線
  • dashed: 破線
  • double: 二重線
  • groove: 彫り込み線
  • ridge: 浮き出し線
  • inset: 枠を内側に凹ませる線
  • outset: 枠を外側に膨らませる線
  • none: 境界線なし

これらの線種を指定するには、以下のように記述します。

.example {
  border-style: /* 線種 */;
}

例えば、要素に赤い点線を適用したい場合は、以下のように記述します。

.example {
  border-style: dotted;
  border-color: red;
}

3. 上下左右に異なる線種を指定する

border-styleプロパティは、上下左右それぞれに異なる線種を指定することも可能です。

  • border-top-style: 上側の線種
  • border-right-style: 右側の線種
  • border-bottom-style: 下側の線種
  • border-left-style: 左側の線種

例えば、上側に実線、右側に点線、下側に破線、左側に二重線を適用したい場合は、以下のように記述します。

.example {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: double;
}

4. 便利な応用テクニック

border-styleプロパティを組み合わせることで、様々な表現が可能になります。ここでは、その中でも特に便利な応用テクニックをいくつかご紹介します。

4-1. 点線を活用した背景パターン

点線と背景色を組み合わせることで、簡単に背景にパターンを作成することができます。

.example {
  background-color: #f2f2f2; /* 背景色 */
  border-style: dotted;
  border-width: 1px;
  border-color: #ccc;
}

4-2. 線種と透明度を組み合わせた表現

線種と透明度を組み合わせることで、より繊細な表現が可能になります。

.example {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.5); /* 透明度50%の黒 */
}

5. まとめ

今回は、CSSのborder-styleプロパティについて解説いたしました。

border-styleプロパティをマスターすれば、Webページの表現力は格段に向上します。

ぜひ、本記事を参考に、様々な線種を試し、自分だけのWebページを作成してみてください。

関連記事