CSSのborder-styleで枠線のスタイルを設定し、デザインをカスタマイズする方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのborder-styleプロパティは、要素の枠線のスタイルを指定するために使用されます。枠線のスタイルにはさまざまな種類があり、見た目を大きく変えることができます。

スポンサーリンク

border-styleプロパティの値とその効果の一覧

  • solid – 一重の実線の枠線。
  • dashed – 破線の枠線。
  • dotted – 点線の枠線。
  • double – 二重線の枠線。
  • groove – 凹んだような枠線。
  • ridge – 盛り上がったような枠線。
  • inset – 要素が内側に押し込まれたような枠線。
  • outset – 要素が外側に浮き出たような枠線。
  • none – 枠線を表示しません。
  • hidden – 枠線は非表示ですが、要素の領域は占有します。

注意点や関連情報

border-styleプロパティは、指定するスタイルに応じて枠線の見た目が大きく変わります。例えば、doubleやgrooveなどは、枠線の太さに影響を受けるため、十分な太さを指定することが必要です。また、noneやhiddenを使用すると、枠線自体は表示されませんが、領域の占有には影響を与えるため、レイアウトに注意が必要です。

border-styleが効かない理由として考えられること

border-widthが設定されていない

border-styleは、border-widthが設定されていない場合には効果が見えにくくなります。ボーダーの幅が0やデフォルトのままだと、スタイルが適用されていても視覚的に確認できません。
対策：border-widthを設定し、ボーダーの幅を適切に指定します。例えば、border-width: 1px;を設定することで、ボーダーが見えるようになります。

共通するCSSコード

.css-sample-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 20px 0;
      text-align: center;
    }

    .css-sample-item {
      width: 300px;
      padding: 20px;
      margin: 10px 0;
    }

border-style: solid;

一重の実線の枠線です。シンプルでよく使われるスタイルです。

HTMLコード

<div class="css-sample-container css-sample-border-solid">
      <div class="css-sample-item">Solid Border</div>
    </div>

CSSコード

.css-sample-border-solid {
      border: 3px solid #99ccff;
    }

表示結果

Solid Border

border-style: dashed;

破線の枠線です。カジュアルな印象を与えるスタイルです。

HTMLコード

<div class="css-sample-container css-sample-border-dashed">
      <div class="css-sample-item">Dashed Border</div>
    </div>

CSSコード

.css-sample-border-dashed {
      border: 3px dashed #99ccff;
    }

表示結果

Dashed Border

border-style: dotted;

点線の枠線です。繊細で軽やかな印象を与えるスタイルです。

HTMLコード

<div class="css-sample-container css-sample-border-dotted">
      <div class="css-sample-item">Dotted Border</div>
    </div>

CSSコード

.css-sample-border-dotted {
      border: 3px dotted #99ccff;
    }

表示結果

Dotted Border

border-style: double;

二重線の枠線です。装飾的な枠線スタイルです。

HTMLコード

<div class="css-sample-container css-sample-border-double">
      <div class="css-sample-item">Double Border</div>
    </div>

CSSコード

.css-sample-border-double {
      border: 6px double #99ccff;
    }

表示結果

Double Border

border-style: groove;

凹んだような見た目の枠線です。立体的な効果があります。

HTMLコード

<div class="css-sample-container css-sample-border-groove">
      <div class="css-sample-item">Groove Border</div>
    </div>

CSSコード

.css-sample-border-groove {
      border: 6px groove #99ccff;
    }

表示結果

Groove Border

border-style: ridge;

盛り上がったような見た目の枠線です。立体感を出すことができます。

HTMLコード

<div class="css-sample-container css-sample-border-ridge">
      <div class="css-sample-item">Ridge Border</div>
    </div>

CSSコード

.css-sample-border-ridge {
      border: 6px ridge #99ccff;
    }

表示結果

Ridge Border

border-style: inset;

要素が内側に押し込まれたような見た目の枠線です。

HTMLコード

<div class="css-sample-container css-sample-border-inset">
      <div class="css-sample-item">Inset Border</div>
    </div>

CSSコード

.css-sample-border-inset {
      border: 6px inset #99ccff;
    }

表示結果

Inset Border

border-style: outset;

要素が外側に浮き出たような見た目の枠線です。

HTMLコード

<div class="css-sample-container css-sample-border-outset">
      <div class="css-sample-item">Outset Border</div>
    </div>

CSSコード

.css-sample-border-outset {
      border: 6px outset #99ccff;
    }

表示結果

Outset Border

border-style: none;

枠線を表示しませんが、領域は確保されます。

HTMLコード

<div class="css-sample-container css-sample-border-none">
      <div class="css-sample-item">None Border</div>
    </div>

CSSコード

.css-sample-border-none {
      border: none;
    }

表示結果

None Border

border-style: hidden;

枠線は非表示になりますが、領域は占有されます。

HTMLコード

<div class="css-sample-container css-sample-border-hidden">
      <div class="css-sample-item">Hidden Border</div>
    </div>

CSSコード

.css-sample-border-hidden {
      border: hidden;
    }

表示結果

Hidden Border

まとめ

  • border-styleプロパティは、枠線のスタイルを指定するために使用されます。
  • 各スタイルによって見た目が大きく異なり、デザインに合わせて選択することが重要です。
  • 枠線のスタイルによっては、枠線の太さや色が効果に大きく影響するため、適切に設定しましょう。
スポンサーリンク