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

CSSのborder-widthプロパティの使い方を解説！ボーダーの太さを指定する方法

border-widthプロパティとは？

CSSのborder-widthプロパティは、要素の境界線（ボーダー）の太さを指定するためのプロパティです。上下左右それぞれの辺に対して個別に太さを設定したい場合は、border-top-width（上）、border-right-width（右）、border-bottom-width（下）、border-left-width（左）を使用します。

なお、border-widthによる指定は、border-styleプロパティが「none」以外の値（solid、dashedなど）に設定されている場合にのみ反映されます。スタイルの指定を忘れると境界線自体が表示されないため、必ずセットで設定するようにしましょう。

構文

border-widthプロパティの基本的な構文は以下の通りです。

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

指定できる値には、「thin」（細い）、「medium」（標準・初期値）、「thick」（太い）というキーワードのほか、pxやemなどの具体的な長さの単位があります。

使用例1：ネストしたdiv要素への適用

次の例では、外側のdiv要素に二重線（double）のボーダーを5pxで指定し、内側のdiv要素には赤色の破線（dashed）で細いボーダー（thin）を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
#main {
    border-bottom-width: 20px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
div {
    margin: auto;
    height: 100px;
    width: 80px;
    border-style: double;
    border-width: 5px;
}
div > div {
    margin-top: 15px;
    height: 50px;
    width: 50px;
    border-style: dashed;
    border-color: red;
    border-width: thin;
    text-align: center;
    line-height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div>demo</div>
</div>
</body>
</html>

表示結果

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

CSSのborder-widthプロパティの使い方を解説！ボーダーの太さを指定する方法

使用例2：p要素とq要素への適用

続いて、段落（p要素）に山形のridgeボーダーを4pxで指定し、引用（q要素）には実線（solid）の細いボーダーを適用した例です。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    padding: 2%;
    border-style: ridge;
    border-width: 4px;
    border-color: indianred;
}
q {
    border-style: solid;
    border-width: thin;
    text-align: center;
    font-style: italic;
}
</style>
</head>
<body>
<p>
ここに学生の詳細情報が記載されています。
</p>
<hr>
<q>教育は、世界を変えるために使える最も強力な武器である。</q>
</body>
</html>

表示結果

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

CSSのborder-widthプロパティの使い方を解説！ボーダーの太さを指定する方法

  1. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &

  2. 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本の二重線 da