CSS - border-bottom 屬性

CSS **border-bottom** 屬性是一個簡寫屬性，它提供了一種簡單的方法來在一個宣告中設定border-bottom-width、border-bottom-style 和 border-bottom-color 屬性的值。此屬性受書寫模式的影響。

語法

border-bottom: border-width border-style border-color| initial |inherit;

屬性值

值	描述
border-bottom-width	指定底部邊框的寬度。預設值為 medium。
border-bottom-style	指定底部邊框的樣式。預設值為 none。
border-bottom-color	指定底部邊框的顏色。預設值為文字的顏色。
initial	將屬性設定為其預設值。
inherit	從父元素繼承此屬性。

CSS 底部邊框屬性示例

以下示例說明了使用不同值的 **border-bottom** 屬性。

設定所有底部邊框屬性值

要在一個宣告中設定 border-block-start-width、border-block-start-style 和 border-block-start-color 的值，我們使用 **border-block-start** 屬性。在下面的示例中，使用了 4px 寬度、dashed 樣式和藍色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #caps {
            width: 500px;
            border-bottom: 4px solid red;
        }

        #small {
            width: 500px;
            border-bottom: 4px dashed green;
        }

        #border {
            padding: 10%;
            width: 300px;
            border: 1px solid black;
            border-bottom: 7px double orange;
        }
    </style>
</head>

<body>
    <h2>CSS border-bottom Property</h2>
    <p id="caps">
        THIS SHOWS THE BORDER BOTTOM PROPERTY ON CAPITAL TEXT.
    </p>
    <p id="small">
        this shows the border bottom property on small text.
    </p>
    <p id="border">
        This shows border bottom property on border.
    </p>
</body>

</html>

底部邊框屬性的組成部分

**border-block-start** 屬性是 border-bottom-width、border-bottom-style 和 border-bottom-color 的組合。以下示例顯示了這些單個屬性如何協同工作以顯示 border-block-start 效果。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        #caps {
            border-bottom-width: 4px;
            border-bottom-style: solid;
            border-bottom-color: grey;
        }

        #small {
            border-bottom-width: 7px;
            border-bottom-style: double;
            border-bottom-color: #666699;
        }
    </style>
</head>

<body>
    <h2>CSS border-bottom Property</h2>
    <p id="caps">
        THIS SHOWS THE BORDER BOTTOM PROPERTY USING CONSTITUENT PROPERTIES.
    </p>
    <p id="small">
        this shows the border bottom property using constituent properties.
    </p>
</body>

</html>

支援的瀏覽器

屬性
border-bottom	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面