CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード

CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。

また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。

border-styleで指定できる主な値

  • none / hidden … 枠線を表示しない
  • solid … 1本の実線
  • double … 2本の二重線
  • dashed … 破線
  • dotted … 点線
  • ridge … 浮き上がって見える山形の線
  • groove … 彫り込まれて見える谷形の線
  • inset … 要素全体がへこんで見える線
  • outset … 要素全体が盛り上がって見える線

構文

CSSのborder-styleプロパティの基本構文は以下のとおりです。

セレクタ {
    border-style: /*値*/;
}

サンプルコード①：複数のスタイルを比較する

以下の例では、3つのdiv要素に異なるborder-styleを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type {
    margin: 5% 0 0 20%;
}
div {
    height: 40px;
    width: 40px;
    margin: auto;
    padding: 10px;
    border-style: solid;
    display: flex;
    float: left;
}
#d1 {
    border-style: double dashed;
}
#d2 {
    border-style: dotted;
}
</style>
</head>
<body>
<div></div>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード

1つ目のdivはデフォルトの「solid（実線）」、2つ目のdiv（#d1）は「double dashed」により上下が二重線・左右が破線、3つ目のdiv（#d2）は「dotted（点線）」で表示されています。値をスペース区切りで複数指定すると、「上下 左右」あるいは「上 右 下 左」のように、各辺へ個別のスタイルを割り当てることができます。

サンプルコード②：太さ・色・角丸との組み合わせ

次の例では、border-styleに加えてborder-width（太さ）、border-color（色）、角丸（border-radius）を組み合わせています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 20px;
    float: left;
    height: 80px;
    width: 60px;
    border-style: ridge;
    border-width: 1.2em;
    border-color: midnightblue;
    border-bottom-left-radius: 50%;
}
div + div {
    height: 120px;
    width: 80px;
    border-style: double;
    border-color: seagreen;
    border-right-width: 180px;
    border-bottom-right-radius: 100%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード

1つ目のdivは「ridge」スタイルに太めの枠線とミッドナイトブルー（midnightblue）の色、左下の角丸を組み合わせた立体感のある枠線になります。2つ目のdivは「double」スタイルにシーグリーン（seagreen）の色、極太の右枠線、右下の大きな角丸を適用した装飾的な枠線になります。このように、border-styleは他のボーダー関連プロパティと組み合わせることで、表現の幅が大きく広がります。


  1. CSSのマージン短縮プロパティ（shorthand）の使い方｜基本構文と実例コードを解説

    CSSのマージン短縮プロパティとは？CSSのマージン短縮プロパティ（margin shorthand）は、要素の外側の余白（マージン領域）をまとめて定義するためのプロパティです。margin-top、margin-right、margin-bottom、margin-leftを個別に指定する代わりに、1つのmarginプロパティだけで一括設定できます。値は時計回りの順序で適用されます。つまり、「上（margin-top）→ 右（margin-right）→ 下（margin-bottom）→ 左（margin-left）」の順です。構文CSSのmarginプロパティの基本構文は以下のとおりです

  2. CSSのmax-heightプロパティとは？使い方と実例をわかりやすく解説

    max-heightプロパティとは？CSSのmax-heightプロパティを使用すると、要素のコンテンツボックスに固定の最大高さを定義できます。このプロパティが適用された要素は、実際の高さがmax-heightの値よりも大きい場合でも、コンテンツボックスがそれ以上高くなることはありません。特にoverflow: hidden;と組み合わせることで、はみ出したコンテンツを非表示にし、レイアウトをすっきりと整えることができます。構文CSS max-heightプロパティの構文は以下のとおりです。Selector {    max-height: /*値*/ }max-heigh