CSS - border-bottom-width

CSS **border-bottom-width** 屬性設定元素底部邊框的寬度。為了使用此屬性，必須宣告 border-style 或 border-bottom-style。

語法

border-bottom-width: medium | thin | thick | length | initial | inherit;

屬性值

值	描述
medium	指定底部邊框中等寬度。預設值。
thin	指定細的底部邊框。
thick	指定粗的底部邊框。
length	底部邊框厚度可以使用值指定。
initial	將屬性設定為其預設值。
inherit	從父元素繼承此屬性。

CSS 底部邊框寬度屬性示例

以下示例使用不同的值解釋 **border-bottom-width** 屬性。

中等底部邊框寬度

要為 **border-bottom-width** 設定中等邊框，我們使用 medium 值。在以下示例中，使用了 medium 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: medium;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: medium;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with medium value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with medium value.
    </p>
</body>

</html>

細的底部邊框寬度

要為 **border-bottom-width** 設定細邊框，我們使用 thin 值。在以下示例中，使用了 thin 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 3px solid;
            border-bottom-width: thin;
        }

        h3 {
            padding: 10px;
            border: 3px dashed;
            border-bottom-width: thin;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>T
        his shows border-bottom-width property 
        with thin value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with thin value.
    </p>
</body>

</html>

粗的底部邊框寬度

要為 **border-bottom-width** 設定粗邊框，我們使用 thick 值。在以下示例中，使用了 thick 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: thick;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: thick;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with thick value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with thick value.
    </p>
</body>

</html>

自定義底部邊框寬度

要設定 **border-bottom-width** 的邊框厚度，我們可以根據自己的選擇指定厚度值。在以下示例中，使用了 15px 厚度值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 10px;
            border: 1px solid;
            border-bottom-width: 15px;
        }

        h3 {
            padding: 10px;
            border: 1px dashed;
            border-bottom-width: 15px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-bottom-width property
    </h2>
    <h3>
        This shows border-bottom-width property 
        with 15px value.
    </h3>
    <p>
        This shows border-bottom-width property 
        with 15px value.
    </p>
</body>

</html>

支援的瀏覽器

屬性
border-bottom-width	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面