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

CSSで下境界線（border-bottom）のスタイルを設定する方法

要素の下側に表示される境界線（ボーダー）のデザインを変更したい場合は、CSSの border-bottom-style プロパティを使用します。このプロパティでは、点線や二重線、破線、実線など、さまざまなスタイルの下境界線を簡単に設定できます。

指定できる主な値

border-bottom-style プロパティに指定できる代表的な値は以下のとおりです。

  • dotted … 点線
  • dashed … 破線
  • solid … 実線
  • double … 二重線
  • inset … 凹んで見える立体風の線
  • outset … 浮き上がって見える立体風の線

サンプルコード

次のコードを実行すると、各クラスごとに異なるスタイルの下境界線が表示されます。実際にブラウザで動かして、見た目の違いを確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.dotted {border-bottom-style: dotted;}
         p.double {border-bottom-style: double;}
         p.dashed {border-bottom-style: dashed;}
         p.solid {border-bottom-style: solid;}
         p.inset {border-bottom-style: inset;}
         p.outset {border-bottom-style: outset;}
      </style>
   </head>
   <body>
      <p class = "dotted">点線（dotted）の下境界線です。</p>
      <p class = "double">二重線（double）の下境界線です。</p>
      <p class = "dashed">破線（dashed）の下境界線です。</p>
      <p class = "solid">実線（solid）の下境界線です。</p>
      <p class = "inset">凹み風（inset）の下境界線です。</p>
      <p class = "outset">浮き出し風（outset）の下境界線です。</p>
   </body>
</html>

実行結果

上記のコードをブラウザで開くと、段落ごとに異なるスタイルの下境界線が描画されます。境界線の太さは border-bottom-width、色は border-bottom-color プロパティで個別に調整することも可能です。

CSSで下境界線（border-bottom）のスタイルを設定する方法

  1. CSSで境界線（ボーダー）を作成・スタイリングする方法をわかりやすく解説

    CSS borderプロパティとは？CSSを使えば、HTML要素に境界線（ボーダー）を定義し、さまざまな方法でスタイリングすることができます。その中心となるのが borderプロパティ です。これはショートハンド（省略記法）として機能し、以下の3つの個別プロパティを一度にまとめて指定できます。border-width：境界線の太さborder-style：境界線の種類（実線、点線など）border-color：境界線の色さらに、border-imageプロパティ を使えば、単色の線ではなく画像を境界線として表示することも可能です。基本構文CSSのborderプロパティの基本的な書き方は以下のと

  2. CSSのborderショートハンド（一括指定）プロパティの使い方

    borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。構文CSSのborderプロパティは、次のように記述します。セレクタ {     border: /*値*/ }値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれ